개발자를 위한 웹 기술 - Array.prototype.reduce() 을 정리한 글 입니다.

reduce()

:reduce()메서드는 배열의 각 요소에 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.

예시

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce((previousValue, currentValue) => previousValue + currentValue, initialValue);

console.log(sumWithInitial);
// 10

인자

• reduce 함수는 네 개의 인자를 가진다.

  1. 누산기 (acc)
  2. 현재 값 (cur)
  3. 현재 인덱스 (idx)
  4. 원본 배열(src)

• reducer 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다.

구문

arr.reduce(callback[, initialValue])

매개변수

callback

: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받는다.

• accumulator

  • 누산기는 콜백의 반환값을 누적한다.
  • 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에 initialValue의 값이다.

• currentValue

  • 처리할 현재 요소

• currentIndex (optional)

  • 처리할 현재 요소의 인덱스
  • initialValue를 제공한 경우 0, 아니면 1부터 시작

• array (optional)

  • reduce()를 호출한 배열

initialValue

• callback의 최초 호출에서 첫 번째 인수에게 제공하는 값
• 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다.
• 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.

반환 값

• 누적 계산의 결과 값

설명

콜백의 최초 호출 때, accumulator와 currentValue는 두 가지 값 중 하나를 가질 수 있다.

1. reduce() 함수 호출에서 initialValue를 제공한 경우

• accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같다.

2. initialValue를 제공하지 않았을 경우

• accumulator는 배열의 첫 번째 값과 같고, currentValue는 두 번째와 같다.

• initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너 뛴다.
• initialValue를 제공하면 인덱스 0에서 시작한다.