reduce와 응용법

reduce의 기본 사용법

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

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

Array.reduce(callback[, initialValue]);

리듀스의 callback 함수는 4개의 인수를 갖는다.

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

return값 // 누적 계산의 결과 값.

콜백의 최초 호출 때 accmulator와currentValue 는 두가지 값중 하나를 가질 수 있다>
if reduce() 함수 호출에서 기본값(initialValue)을 제공 한 경우
accmulator은 initialValue와 같고, currentValue는 배열의 첫번째 값과 같다.

else if 제공하지 않는다면
accumulator는 배열의 첫번째 값과 같고, currentValue는 두번째 값과 같다.

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

else if 배열이 비어있는데 initialValue도 제공하지 않는 경우엔
&& initlalValue가 주어졌으나 배열이 빈 경우엔
단독 값을 callback 호출 없이 반환한다.

var maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );
var maxCallback2 = ( max, cur ) => Math.max( max, cur );

// initialValue 없이 reduce()
[ { x: 22 }, { x: 42 } ].reduce( maxCallback ); // 42
[ { x: 22 }            ].reduce( maxCallback ); // { x: 22 }
[                      ].reduce( maxCallback ); // TypeError

// map/reduce로 개선 - 비었거나 더 큰 배열에서도 동작함
[ { x: 22 }, { x: 42 } ].map( el => el.x )
                        .reduce( maxCallback2, -Infinity );

reduce() 상세한 작동 방식

initialValue를 제공하지 않는 경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

callback	누산 값	현재 값	현재 인덱스	원본 배열	반환 값
1번째 호출	0	1	1	[0, 1, 2, 3, 4]	1
2번째 호출	1	2	2	[0, 1, 2, 3, 4]	3
3번째 호출	3	3	3	[0, 1, 2, 3, 4]	6
4번째 호출	6	4	4	[0, 1, 2, 3, 4]	10

인덱스가 1로 시작한다.

initialValue를 제공한 경우

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
}, 10);

callback	누산 값	현재 값	현재 인덱스	원본 배열	반환 값
1번째 호출	10	0	0	[0, 1, 2, 3, 4]	10
2번째 호출	10	1	1	[0, 1, 2, 3, 4]	11
3번째 호출	11	2	2	[0, 1, 2, 3, 4]	13
4번째 호출	13	3	3	[0, 1, 2, 3, 4]	16
5번째 호출	16	4	4	[0, 1, 2, 3, 4]	20

인덱스는 0부터 시작하고 누산값은 initialValue로 시작한다.