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);
// expected output: 10

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

• 누산기 (acc)
• 현재 값 (cur)
• 현재 인덱스 (idx)
• 원본 배열 (src)

Reducer 사용방법

reducer에는 누산기가 포함되어 있기 때문에, 배열의 각 요소에 대해 함수를 실행하고 누적된 값을 출력할 때 용이함.
가장 기본적인 예제로는 모든 배열의 합을 구하는 경우가 있다.

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, idx) => { return acc += cur; }, 0);
console.log(result);  // 15

const arr2 = [1, 2, 3, 4, 5];
const result2 = arr2.reduce((acc, cur, idx) => { return acc += cur; }, 10);
console.log(result2);  // 25

위 예제를 보면 초기값을 0으로 둔 acc의 초기값은 0이되고, 배열의 첫 번째 요소부터 acc자신의 값인 cur을 더해간다.
reducer()를 실행하고 난 뒤, 최종적으로 반환되는 값은 0+1+2+3+4+5 인 15가 됨.

초기값을 10으로 두면, acc의 초기값은 10이되고, 배열의 첫 번째 요소부터 acc에 자신의 값인 cur을 더해가므로 최종적으로 반환되는 값은 10+1+2+3+4+5인 25가 되는 것.

결론

• 배열의 모든 요소들에 대해 체크하고 누적된 값을 출력하고 싶을 때 용이함.
  for문이나 count를 위한 별도의 변수를 선언하지 않고도 바로 결과가 출력되기 때문에 코드가 훨씬 깔끔해짐.