developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

 

Array.prototype.reduce() - JavaScript | MDN

Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. The source for this interactive example is stored in a GitHub repository. If you'd

developer.mozilla.org

 

Array.reduce는 배열함수 중에서 가장 이해하기 애매한 함수였는데,

결국 배열마다 callback를 통해서 처리받은 value를 계속해서 누적해서 return 해준다고 보면 좋을거 같다.

 

이 함수는 특별히 예제마다 거의 합산을 통해서 설명해준다 ...

const numbers = [1, -1, 2, 3, 4, 10, 13];

let sum = 0;
for (let n of numbers) 
   sum += n;

console.log(sum); // 32

 

기본적으로 배열의 총합을 구할때 위와 같이 처리해도 상관없지만

Array.reduce를 사용하면 다음과 같이 구현된다.

const result = numbers.reduce((acc, value) => {
   console.log(acc, value);
   return acc + value;
});

console.log(result); // 32

 

callback 함수에는 2가지 값이 들어가게 되는데 첫번째 파라미터는 누산되는 값이고,

두번째는 현재 배열의 값이 들어가게 된다.

 

따라서 콘솔을 찍어보면

// 1, -1
// 0, 2
// 5 4
// 9 10
// 19 13

const result = numbers.reduce((acc, value) => {
   console.log(acc, value);
   return acc + value;
});

console.log(result); // 32

와 같이 표현되며 결국 마지막값인 19 + 13 = 32가 리턴되게 된다.

 

또한 콜백함수 뒤에서 초기값을 전달 해줄수도 있다.

// 10 2
// 12 3
// 15 4
// 19 10
// 29 13

const result = numbers.reduce((acc, value) => {
   console.log(acc, value);
   return acc + value;
}, 10);

console.log(result); // 42