<aside> 💡 정의와 구문설명을 보며 이해하기 보단, 사용법과 예제를 보며 이해하는 것이 훨씬 수월하다.

</aside>

정의

MDN에 나와있는 정의는 다음과 같다.

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

구문 설명

reduce() 메서드는 배열에 사용이 가능하다.

const arr = [1, 2, 3, 4, 5];
const initialValue = 0;

arr.reduce((accumulator, currentValue, currentIndex, array) => { 
	return accumulator + currentValue;
}, initialValue);

reduce() 메서드의 첫 번째 인자는 배열의 각 요소에 대해 실행 할 콜백 함수이다.

두 번째 인자는 콜백 함수의 첫 번째 호출에서 첫 번째 인수에 제공하는 값이다. (필수 x)

콜백 함수는 다음과 같은 인수를 받는다.

• accumulator
  • 누산기 라고 하며, 콜백 함수의 반환값을 누적한다. 직전에 호출된 콜백 함수의 반환값을 나타내거나, 첫 번째 호출이고, initialValue가 있을 경우 initialValue를 반환하기도 한다.
• currentValue
  • 배열의 현재 요소
• currentIndex
  • 배열의 현재 요소의 인덱스. initialValue가 있을 경우 0부터 시작하고, 아니면 1부터 시작한다.
• array
  • 원본 배열

사용법

기본적인 사용법을 나타내는 예제는 배열을 순회하면서 값을 더하는 예제이며, 다음과 같다.

const arr = [2, 4, 6, 8, 10];
const result = arr.reduce((acc, cur) => acc + cur); 
console.log(result);

// 결과
// 30

위 과정을 한 단계씩 로그로 남겨보면 다음과 같다.