[JavaScript] forEach, map, filter, reduce 메서드

0. 공통점

⚡ 고차함수(자신의 매개변수에 콜백함수를 전달받음)
🪐 원본 배열을 탐색하며 콜백함수를 반복 호출

1. forEach

forEach (callback, thisArg)

a = [10, 11, 12, 13, 14, 15];

a.forEach(function (value, index) {
  console.log(value, index, this);
}, [1, 2]);

• 배열 요소들을 탐색하며 콜백함수를 반복하여 호출

2. map

map (callback, thisArg)

a = [10, 11, 12, 13, 14, 15];

let answer = a.map(function (value, index) {
  if (value % 2 == 0) {
    return value;
  }
}, [1, 2]);
console.log(answer); // [10, undefined, 12, undefined, 14, undefined]

• 원본 배열을 탐색하며 콜백함수가 return한 값을 요소로 새로운 배열을 생성
• 새롭게 생성한 배열과 원본 배열의 길이가 같음 주의

3. filter

filter (callback, thisArg)

a = [10, 11, 12, 13, 14, 15];

let answer = a.filter(function (value, index) {
  return value % 2 == 0;
}, [1, 2]);
console.log(answer); // [10, 12, 14]

• 원본 배열을 탐색하며 콜백함수가 참을 return한 요소만으로 새로운 배열 생성
• map과 달리 filter는 원본 배열에서 특정값들을 필터링해 새로운 배열로 만들어주는 것 (참, 거짓 판단)
• 따라서 map은 원본배열과 길이가 같지만, filter는 딱 새로운 배열의 요소 갯수만큼의 길이

4. reduce

reduce (callback, initialValue)

a = [10, 11, 12, 13, 14, 15];

let answer = a.reduce(function (accumulate, value) {
  return accumulate + value;
}, 0);
console.log(answer);
// 0 + 10
// 10 + 11
// 21 + 12
// 33 + 13
// 46 + 14
// 60 + 15
// 75

• 원본배열 탐색하며 콜백함수 반복호출
• 값을 생성해서 return함