[JavaScript] 배열 메서드 정리

Array.prototype.slice()

• start ~ end 직전까지에 대한 얕은 복사본으로 새로운 배열을 리턴한다.
• 원본 배열을 변경하지 않는다.

const arr = ['a', 'b', 'c', 'd', 'e'];

// slice(startIdx, endIdx) 
console.log(arr.slice(2,4)); // ['c', 'd']

Array.prototype.splice()

• 시작 인덱스부터 입력된 갯수만큼 배열에서 추출한 후 원본 배열을 변경한다.

const arr = ['a', 'b', 'c', 'd', 'e'];

// splice(startIdx, deleteCount)

console.log(arr.splice(2,3)); // 이 때의 리턴 값은 ['c', 'd', 'e'];
console.log(arr); // ['a', 'b']

// 배열에 새로운 요소 추가
arr.splice(1,0,'ff');
console.log(arr); //  ['a', 'ff', 'b'];

// 배열 요소 교체
arr.splice(1,1,'cc'); // 이 때의 리턴 값은 ['ff']
console.log(arr) // ['a', 'cc', 'b']

Array.prototype.reverse()

• 배열의 순서를 반전시키고, 원본 배열을 변경한다.

const arr = ['a', 'b', 'c', 'd', 'e'];

arr.reverse(); // ['e', 'd', 'c', 'b', 'a']
console.log(arr); // ['e', 'd', 'c', 'b', 'a']

Array.prototype.concat()

• 두 배열을 합치고, 합쳐진 배열을 리턴한다.
• 원본 배열을 변경하지 않는다.

const arr1 = ['a', 'b', 'c'];
const arr2 = ['d', 'e', 'f'];

// (arr or [value]).concat(arr or [value])

const arr3 = arr1.concat(arr2);
console.log(arr3) // ['a', 'b', 'c', 'd', 'e', 'f']

// 스프레드 문법으로도 같은 효과를 얻을 수 있다.
const arr4 = [...arr1, ...arr2];
console.log(arr4); // ['a', 'b', 'c', 'd', 'e', 'f']

Array.prototype.join()

• 문자열 seperator를 기준으로 각 요소를 구분해 전체 배열을 문자열로 리턴한다.
• 원본 배열을 변경하지 않는다.

const arr = ['a', 'b', 'c', 'd', 'e'];

arr.join(' '); // 'a b c d e'
console.log(arr); // ['a', 'b', 'c', 'd', 'e']

Array.prototype.at()

• at(idx) idx에 해당하는 요소를 리턴한다.
• 배열의 길이를 모르는 경우에서, 마지막 요소를 가져올 때 간편하게 쓸 수 있다.

const arr = [23, 11, 44];

// at(idx) idx에 해당하는 요소를 반환한다.
console.log(arr.at(1)); //11

// 배열의 길이를 모르는 경우에서 마지막 요소를 가져올 때 간편하게 쓸 수 있다.
console.log(arr[arr.length - 1]); //44
console.log(arr.at(-1)); //44

---

 

Array.prototype.forEach()

• forEach 메서드는 콜백함수를 필요로 하는 고차함수이다.
• forEach 메서드가 적용된 배열을 반복하며, 배열의 각 요소에 대하여 콜백함수를 실행한다. for문을 대체할 수 있으며, for문 보다 가독성이 좋다. 또한 메서드 체이닝(메서드를 연결하여 사용하는 것)으로 활용도가 높다.
• 콜백함수 실행시 배열의 현재 요소, 인덱스, 메서드가 실행중인 배열을 순서대로 인자 값으로 전달한다.
• for문과 달리 break문을 사용할 수 없다.

const arr = ['a', 'b', 'c', 'd', 'e'];

// 일반 반복문
for (const [idx, val] of arr.entries()) {
  console.log(idx, val);
}
// 0 a 1 b 2 c ...

// forEach 반복문
arr.forEach((val, idx) => console.log(idx, val));
// 0 a 1 b 2 c ...

• forEach 메서드는 함수의 유효범위를 벗어나는 작업, 즉 의도적으로 부수효과를 필요로 할 때에도 사용할 수 있다. (부수효과는 의도치 않은 동작을 발생시킬 수 있으므로 주의가 필요하다.) 

const people = [{'name' : 'a', 'age' : '20'}, {'name' : 'b', 'age' : '25'}];

// 요소 객체에 새로운 프로퍼티 동적 할당
people.forEach(person => person.gender = person.name === 'a' ? 'f' : 'm')

console.log(people)
// 0: {name: 'a', age: '20', gender: 'f'}
// 1: {name: 'b', age: '25', gender: 'm'}

Array.prototype.map()

• 배열 내의 모든 요소에 대해 각각 콜백함수를 실행하여, 그 결과를 모아 새로운 배열을 만든다. (원본 영향x)
• 내부의 요소를 활용해 새로운 배열을 리턴하기 때문에, 원본의 크기는 유지된다.
• forEach 메서드와 동일하게 요소, 인덱스, 배열을 순서대로 인자값으로 전달한다. 
• for문을 돌아 새로운 배열에 push 하는 방식보다, 콜백함수를 활용한 함수형 프로그래밍 방식이 더 modern한 방식이라고 할 수 있다.

const nums = [1, 2, 3, 4, 5];

const newNums = nums.map(el => el * 2);
// [2, 4, 6, 8, 10]

Array.prototype.filter()

• 콜백함수의 조건을 만족하는 배열의 요소들만 '필터링' 하여 새로운 배열을 리턴한다. (원본 영향x)

const nums = [1, 2, 3, 4, 5];

const numFilter = nums.filter(num => num > 3)
// [4, 5]

Array.prototype.reduce()

• 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, '하나의 결과값'을 리턴한다.

const nums = [1, 2, 3, 4, 5];

// reduce 활용한 합계 계산
nums.reduce((acc, cur) => acc + cur, 0)
// 15

// reducer 함수의 리턴값은 acc이다.
nums.reduce((acc, cur) => {
    acc = acc + cur;
    return acc
    }, 0)
// 15


// for..of 활용한 합계 계산
let sum = 0;
for(let num of nums) sum += num;
console.log(sum) // 15

• 리듀서 함수(reduce의 콜백함수)는 4개의 인자값을 갖는다.
  • accumulator : 콜백의 리턴값 누적 (굴릴수록 커지는 눈사람 역할),
  • currentValue : 처리할 현재 요소
  • currentIndex : 현재 요소의 인덱스
  • array : reduce를 호출한 배열 
  • + initialValue :  초기값, 콜백 최초 호출에서 첫 번째 인수(acc)를 제공하는 값. 초기값이 없을 경우 배열의 첫 번째 요소를 사용한다. 
• 요소를 반복하고 accumulator 에 누산되어 리턴된다는 점에서, map,filter,forEach 등의 기능을 reduce로 구현할 수 있다.

const nums = [1, 2, 3, 4, 5];

// 최댓값찾기
const max = nums.reduce((acc, cur) => {
	if (acc > cur) return acc;
	else return cur;
	}, nums[0]);

max // 5

Array.prototype.find()

• 배열에서 조건에 해당하는 요소를 찾아내는 메서드이다.
• filter 메서드와 동일하게 boolean  값을 리턴하는 콜백함수를 필요로 한다.
• 조건에 부합하는 가장 첫번째 요소를 리턴한다. 
• 배열이나 객체에 포함된 한 가지의 요소 혹은 일부분만 알고있으면 그 전체를 찾을 수 있다.
• 만족하는 요소가 없으면 undefined 를 반환한다.

const users = [{'name' : 'Sarah', 'age' : '22'},
               {'name' : 'Jessica', 'age' : '24'}, 
               {'name' : 'Parker', 'age' : '55'}]

users.find(user => user['name'] === 'Jessica');
// {name: 'Jessica', age: '24'}

Array.prototype.findIndex()

• find와 비슷하지만, 조건에 부합하는 첫번째 요소의 '인덱스'를 반환한다.
• 만족하는 요소가 없으면 -1를 반환한다. 
• indexOf와 비슷하지만, 콜백함수에서 자세한 컨디션을 정할 수 있다는 장점이 있다.

const users = [{'name' : 'Sarah', 'age' : '22'},
               {'name' : 'Jessica', 'age' : '24'}, 
               {'name' : 'Parker', 'age' : '55'}]

users.findIndex(user => user['name'] === 'Jessica');
// 1

Array.prototype.some()

• 콜백함수의 조건에 부합하는 요소가 하나라도 있으면 true를 리턴한다. 

const arr = ['a', 1, 'b', 2];

arr.some(el => typeof el === 'number');
// true

Array.prototype.every()

• 콜백함수의 조건에 모든 것이 부합하면 true, 하나라도 통과하지 못하면 false를 리턴한다. 

const arr = ['a', 1, 'b', 2];

arr.every(el => typeof el === 'number');
// false

 

• some & every 메서드는 arr.includes(v) 와 마찬가지로 일치 여부를 판단하지만, 더 세밀한 조건을 부여할 수 있다는 장점이 있다. 
• 조건문에서 배열이 특정 조건을 만족하는 경우에만 무언가 실행되도록 코드를 짠다면, some과 every가 효과적일 수 있다.

Array.prototype.flat()

• 중첩된 배열의 요소를 flat 하게 하나의 배열로 리턴한다.
• 주어진 depth가 있다면 (기본값 1) 이를 이어붙여 새로운 배열을 생성한다.

const arrDeep = [[[1, 2], 3], [4, [5, 6]], 7, 8];
console.log(arrDeep.flat(2)); //[1, 2, 3, 4, 5, 6, 7, 8]

Array.prototype.flatMap()

• map 메서드와 flat이 합쳐진 메서드로, map으로 얻은 결과물에 flat을 실행한 것과 동일한 결과값을 리턴한다.
• flatMap의 경우 depth 1 레벨에서의 flat 밖에 실행하지 못하기 때문에, 더 깊은 중첩 배열에서 적용할 경우 flat과 map을 따로 사용해야 한다. 

onst nums = [[1], [2], [3]];

nums.flatMap(num => num * 2)
// (3) [2, 4, 6]

nums.flatMap(num => [[num * 2]])
// [[2], [4], [6]]

Array.prototype.sort()

[JavaScript] arr.sort() 메서드 (배열의 정렬)

Array.prototype.fill()

• arr.fill(v, srtIdx, endIdx) : strIdx ~ endIdx 만큼의 범위에 v가 포함되도록 arr을 변경한다.
• new Array 생성자와 체이닝해서 원하는 배열을 만들 수 있다.
• 새로운 배열 생성 : new Array(length) : length만큼의 빈 배열 생성

const newArr = new Array(5)

console.log(newArr) //[empty × 5]

newArr.fill(true,0,newArr.length) // [true, true, true, true, true]

Array.prototype.from()

• Array.from({length : n}, (cur, i) => 조건)  혹은 Array.from(유사 배열, (cur, i) => 조건) 
• n만큼의 길이를 가진 배열을 맵핑함수의 리턴값으로 채운 새 배열을 생성한다. 이 때 length 대신 유사배열객체, 이터러블이 들어가게 되면 그 객체를 맵핑함수에 따라 배열화 할 수 있다. (ex NodeList 배열화)
• 콜백함수는 (현재 값, 인덱스)의 순서로 인자값을 받는다.

const arr2 = Array.from({ length: 7 }, () => 1);
// (7) [1, 1, 1, 1, 1, 1, 1]

const z = Array.from({ length: 7 }, (_, i) => i + 1);
// (7) [1, 2, 3, 4, 5, 6, 7]

SUMMARY : 상황별 메서드 사용 정리!!

• 원본 배열 변경 : (add) push, unshift / (remove) pop, shift, splice / (etc) reverse/ sort / fill
• 새로운 배열 생성 : map / filter / slice(일부분) /  concat(합치기) / flat / flatMap
• Index 얻기 : (값 기준) indexOf / (조건 기준) findIndex
• 배열 element 얻기 : (조건 기준) find
• 포함 여부 확인 : (값 기준) includes / (조건 기준) some, every
• 새 문자열 생성 : join(seperator)
• 배열 -> 값 : reduce
• 순회 : forEach (새 배열을 생성하지 않는다.) 

참고자료

https://developer.mozilla.org/ko/

MDN Web Docs

https://www.udemy.com/course/the-complete-javascript-course/

Learn Modern Javascript (Build and Test Apps) - Full Course