reduce() 메소드

dev·2023년 1월 5일

reduce() 란?

reduce()

빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행
reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환
arr.reduce(callback[, initialValue]);
arr.reduce(() => {}, initVal);

arr.reduce( function(accVal, currVal, currIdx, arr){
	return 결과;
}, 초기값) ;

리듀서 함수는 네 개의 인자를 가진다.

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

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

매개변수

callback

배열의 각 요소에 대해 실행할 함수. 다음 네 가지 인수를 받습니다.

accumulator

누산기는 콜백의 반환값을 누적합니다. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값입니다.

currentValue

처리할 현재 요소.

currentIndex (Optional)

처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작합니다.

array (Optional)

reduce()를 호출한 배열.

initialValue (Optional)

callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용합니다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생합니다.

반환값

누적 계산의 결과 값.

설명

accVal: 초기값을 제공하면 accVal은 초기값으로 시작. 초기값을 제공하지 않으면 배열의 첫번째 값으로 시작
currVal: 초기값을 제공하면 배열의 첫번째 값으로 시작, 초기값을 제공하지 않으면 두번째 값으로 시작

보통은 초기값을 주는것이 더 안전함

//초기값을 제공하지 않는경우에는 출력 가능한 형식이 3가지이므로, 보통은 초기값을 주는것이 더 안전함
let maxCallback = ( acc, cur ) => Math.max( acc.x, cur.x );

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


let maxCallback2 = ( max, cur ) => Math.max( max, cur );

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

콜백은 arr.length-1 번 호출된다.

reduce() 작동방식

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

콜백	accVal	currVal	currIdx	arr	retun값
1번째 호출	0	1	1	[0,1,2,3,4]	1
2번째 호출	1	2	3	[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

사용 예시

날짜로 이루어진 배열 dayList 에서 가장 최신의 날짜를 뽑아내고 싶을때

dayList = ['2022-01-29', '2022-01-31', '2022-09-11', '2022-09-16', '2022-06-28', '2022-11-05', '2022-11-01'];

    let recentFlightDate = dayList.reduce(function (accumulator, currentObject) {
        accumulator > currentObject ? accumulator : currentObject;
    });
//recentFlightDate에는 '2022-11-05' 값이 담겨있다.