배열 내 모든 요소를 순회하면서 콜백함수를 반복 호출한다는 공통점이 있는 배열 메소드 4개를 정리해보았습니다. 필요할 때 그 메소드를 써야지 생각이 났으면 좋겠는데 잘 떠오르지가 않더라구요.
이번 기회에 잘 정리해두고 어떤 상황에서 특정 메소드를 사용하는게 좋을지 정리해봅니다.

filter()

• 자신을 호출한 배열의 모든 요소를 순회하면서 콜백함수 반복 호출하여 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다.
• 원본 배열 변경되지 않는다.

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

const odds = numbers.filter(item => item % 2);
console.log(odds); // [1, 3, 5]

배열에서 특정 요소(중복요소) 제거

• filter 메소드를 사용해 특정 요소를 제거할 경우 특정 요소가 중복되어있다면 중복된 요소가 모두 제거된다.

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

let arr = number.filter((item, index) => 
    number.indexOf(item) === index
);

console.log(arr); // [ 1, 2, 3, 4, 5 ]

A와 B의 교집합

let arr1 = [1, 2, 3, 4];
let arr2 = [1, 2, 5, 6, 7];

let arr3 = arr1.filter(item => arr2.includes(item));
console.log(arr3); // [1, 2]

map()

• 자신을 호출한 배열의 모든 요소를 순회하면서 콜백함수 반복 호출하여 반환값으로 구성된 요소로 새로운 배열을 반환한다.
• 원본 배열 변경되지 않는다.

const numbers = [1, 4, 9];

const roots = numbers.map(item => Math.sqrt(item));
console.log(roots); // [1, 2, 3]

• map 메소드를 호출한 배열과 map메소드를 통해 생성된 배열은 1:1 매핑되어 같은 length값을 가진다.

reduce()

• 자신을 호출한 배열의 모든 요소를 순회하면서 콜백함수를 반복 호출하여 최종적으로 하나의 결과값을 만들어 반환한다.
• 원본 배열 변경되지 않는다.
• 첫번째 인수로 콜백함수, 두 번째 인수로 초기값을 전달받는다.
• 초기값은 숫자부터 배열까지 다양한 값을 입력할 수 있다.
• 첫 번째 인수는 앞서 호출했던 함수들의 결과가 누적되어 저장되는 '누산기(accumulator)'라고 생각하면 된다. 마지막 함수까지 호출되면 이 값은 reduce의 반환 값이 된다.
• 초기값과 배열의 첫 번째 요소값을 콜백함수에게 인수로 전달하고, 다음 순회에는 콜백함수의 반환값(acc) 과 두 번째 요소값(cur)을 인수로 전달하면서 호출하고 이러한 과정을 반복하여 하나의 결과값을 반환한다.

배열의 모든 요소 누적한 결과 구하기

const arr = [1,2,3,4]
let sum = arr.reduce((acc, cur) => acc + cur, 0)

console.log(sum); // 

평균 구하기

const arr = [1, 2, 3, 4, 5];
const average = arr.reduce((acc, cur, index) => {
    return index === arr.length - 1 ? (acc + cur) / arr.length : acc + cur
}, 0);

console.log(average); // 3

중복횟수 구하기

const alphabet = ['a', 'b', 'c', 'b', 'd'];

const count = alphabet.reduce((acc, cur) => {
    acc[cur] = (acc[cur] || 0) + 1;
    return acc;
}, {});
// 초기값인 빈 객체에 요소값인 cur을 property key로, 요소의 개수를 value로 할당한다.

console.log(count); // { a: 1, b: 2, c: 1, d: 1 }
 

forEach()

• 자신을 호출한 배열을 순회하면서 콜백함수를 전달받아 반복 호출한다.
• 반복문을 대체할 수 있는 고차함수이다.
• 반복문과의 차이점은 break, continue문을 사용할 수 없다. 배열의 모든요소를 빠짐없이 순회하며 중간에 중단할 수 없다.

const arr = [1, 2, 3];

const newArr = arr.forEach(item => item ** 2);
console.log(newArr); // undefined
// forEach 메소드의 반환값은 언제나 undefined다. 

• return값은 항상 undefined다. 단지 제공된 함수로 배열의 요소를 호출한다.

const arr = [1, 2, 3];
const newArr = [];

const arr2 = arr.forEach(item => newArr.push(item ** 2));
console.log(newArr); // [1, 4, 9]