[JS] Array 메서드(map, filter, reduce)

1. map

• Array.prototype.map : 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다. 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. forEach와 달리 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다.

  • 매개변수 3개(요소값, 인덱스, this)

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

2. filter

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

  • 매개변수 3개(요소값, 인덱스, this)

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

3. reduce

• Array.prototype.reduce : 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 원본 배열은 변경되지 않는다.

  • 첫 번째 인수 : 콜백 함수(4개의 인수)
    • 1. 초기값 또는 콜백 함수의 이전 반환값 accumulator
    • 2. reduce 메서드를 호출한 배열의 요소값 currentValue
    • 3. 인덱스 index (옵션)
    • 4. reduce 메서드를 호출한 배열 자체(this) array (옵션)
  • 두 번째 인수 : 초기값 (옵션이므로 생략 가능, 그러나 초기값 전달하는 것이 안전)

  const sum = [1, 2, 3, 4].reduce(
    (accumulator, currentValue, index, array) => accumulator + currentValue,
    0
  );
  console.log(sum); //10