reduce

이전의 메소드들과 문법이 조금 다르다.

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

numbers.reduce((acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue);

두 번째 요소는 배열의 요소
세 번째 요소는 요소의 인덱스
네 번째 요소는 메소드를 호출한 배열이 전달된다.

첫 번째 파라미터는 영어로 Accumulator라고 하고 한국어로는 누산기라고 표현한다. 줄여서 acc라고도 한다. 이 파라미터는 매번 콜백 함수가 반복해서 동작할 때 직전에 동작한 콜백 함수가 리턴한 값을 전달 받는 파라미터이다. 그래서 reduce 메소드에 활용되는 콜백 함수는 그 다음 콜백 함수에 accumulator로 전달할 값을 리턴해주게 된다. 매 반복 때마다 콜백 함수의 리턴값을 다음 콜백 함수의 acc로 전달해주면서 결국에는 마지막에 실행되는 콜백 함수의 리턴값이 reduce 메소드의 최종 리턴값이 되는 것이다.

제일 처음 실행되는 콜백 함수는 accumulator에 전달받을 값이 없다. 그래서 첫 번째 콜백 함수가 동작할 때 accumulator의 값을 reduce 메소드의 두 번째 아규먼트로 전달해주는 것이다. 콜백 함수의 accumulator를 통해서 현재 동작하는 콜백 함수의 리턴값이 다음에 동작할 콜백 함수에 영향을 끼칠 수 있는 이 특별한 구조가 유용하게 활용될 수도 있다.

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

const sumAll = numbers.reduce((acc, el, i) => {
  console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('------------);
      
  return acc + el;
 }, 0);

console.log('sumAll:', sumAll);