[js 메서드] 배열.reduce()

배열에 사용하는 reduce()메서드는 배열의 각 요소에 콜백 함수를 실행하여 `하나의 값`을 반환한다.

이때 accumulator를 사용할 수 있는 것이 특징적인데, 

accumulator라는 인자를 사용하여,

요소를 순회하며 콜백을 실행할 때 accumulator에 값을 저장해 다음 요소의 콜백에 넘길 수 있다.

 

아래와 같이 reduce 메서드는 callback 함수와 initial value 두 개의 인자를 받는다.

initial value는 accumulator의 초기값으로, 입력하지 않으면 배열[0]이 할당된다.

arr.reduce(callback, initialValue)

callback함수는 최대 4개의 인자를 아래 순서대로 받는다.

currentIndex와 array는 생략 가능하다.

 

1. accumulator: 매 실행마다 누적되는 값으로 처음에는 reduce 메서드의 두 번째 인자로 입력한 초기값이다.

2. currentValue: 매 실행마다 바뀌는 배열의 각 요소.

3. currentIndex: 매 실행마다 바뀌는 배열의 각 요소의 위치.

4. array: 현재 처리 중인 배열.

 

initial value 입력 여부에 따라 달라지는 메서드 실행 방식을 예시와 함께 알아보자.

 

아래는 initial value를 입력하지 않은 경우이며, 이때 accumulator의 초기값은 배열의 첫번째 요소(array[0]) 값이다. 

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

callback함수는 총 4번 실행되며 실행 과정은 아래와 같다.

 

callback	accumulator	currentValue	currentIndex	결과값
1번째 호출	0	1	1	1
2번째 호출	1	2	2	3
3번째 호출	3	3	3	6
4번째 호출	6	4	4	10

최종 반환되는 결과값은 10이다.

callback함수는 아래와 같이 arrow function으로도 표현 가능하다.

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

 

아래는 initial value를 10으로 할당한 경우이며, 이 경우 callback 함수가 5번 실행된다.

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

 

callback	accumulator	currentValue	currentIndex	결과값
1번째 호출	10	0	0	10
2번째 호출	10	1	1	11
3번째 호출	11	2	2	13
4번째 호출	13	3	3	16
5번째 호출	16	4	4	20

최종 반환되는 결과값은 20이다.

 

합산 외에 배열 내 최대값을 찾는 방식으로 reduce() 메서드를 활용해보자.

const numbers = [3, 7, 2, 9, 1, 5];

const max = numbers.reduce((accumulator, currentValue) => {
  return Math.max(accumulator, currentValue);
});

console.log(max); // 9

배열의 요소가 객체일 때도 객체의 특정 프로퍼티에 대한 계산을 위해 사용할 수 있다.

var initialValue = 0;
var sum = [{x: 1}, {x:2}, {x:3}].reduce(function (accumulator, currentValue) {
    return accumulator + currentValue.x;
},initialValue)

console.log(sum) // logs 6

 

코딩테스트에서 매우 유용하게 사용되는 reduce()메서드.

모르면 완전 손해다.

 

더 다양한 사용 예시는 아래의 공식 문서를 참고하자.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN