[ES5] 배열 메소드 : reduce(), reduceRight()

이번 글에서는 약간은 특이하면서도 활용도는 높을 것 같은데... 막상 쓰려고 하면 왠지 잘 쓰지 않게 되는 reduce와 reduceRight 메소드에 대해서 살펴보도록 하겠습니다.

 

1. Array.prototype.reduce()

• Reduce 메소드는 Array를 하나의 단일 값으로 줄입니다.
• 배열의 각 요소에 대해서 callback 함수 (Reducer)를 실행합니다. 
• 원본 배열 값은 변경하지 않습니다.

배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환합니다.

 

reduce는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행하는데, 콜백 함수는 다음의 네 인수를 받습니다:

 

콜백의 최초 호출 때 accumulator와 currentValue는 다음 두 가지 값 중 하나를 가질 수 있습니다. 만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다. initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

[문법]

arr.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)

 

Parameter	Description
function	(필수) 배열의 각 요소에 대해 실행할 reducer 함수 (총 4개 인자)
- accumulator	(필수) 이전 리듀서 함수의 리턴 값 초기 값: initial Value (initial value가 없는 경우에는 배열의 첫 번째 값)
- currentValue	(필수) 현재 엘리먼트의 값 초기 값: initial value가 없는 경우: 배열의 두 번째 값 initial value가 있는 경우: 배열의 첫 번째 값
- currentIndex	(옵션) 현재 엘리먼트의 인덱스 값
- array	(옵션) 현재 엘리먼트가 속한 원본 배열
initialValue	(옵션) 연산에 사용될 초기값 (accumulator의 초기값 )

[예제]

Array의 총합을 구하는 예제입니다. 

var arr = [10, 100, 1000];
var sum = arr.reduce((total, value) => total+value);

console.log(sum); // 1110

 

Iteration	total	value	currentIndex	반환 값
1	10	100	1	110
2	110	1000	2	1110

 

참고: initialValue를 제공하지 않으면, reduce()는 인덱스 1부터 시작해 콜백 함수를 실행하고 첫 번째 인덱스는 건너뜁니다. initialValue를 제공하면 인덱스 0에서 시작합니다.

 

 

초기값을 주는 경우에는 다음과 같이 나타납니다.

var arr = [10, 100, 1000];
var sum = arr.reduce((total, value) => total+value, 10000);

console.log(sum); // 11110

 

Iteration	total	value	currentIndex	반환 값
1	10000	10	0	10010
2	10010	100	1	10110
3	10110	1000	2	11110

 

사실 reduce는 단순한 숫자 더하기 빼기에만 사용되는 것이 아니라 다양한 응용 기능이 가능합니다.

 

✅ Array flatten 기능을 구현할 수 있습니다. (1단계만 가능)

var arr = [[1, 2, 3], [4], [5, 6], [7, 8, 9]];

var flatArr = arr.reduce((total, value) => total.concat(value));

console.log(flatArr); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

 

✅ 객체 구조를 변경하여 새로운 객체를 생성할 수 있습니다.

var family = [
  { name: "철수", type: "boy" },
  { name: "영희", type: "girl" },
  { name: "바둑이", type: "dog" }
]
var familyType = family.reduce((acc, item) => {
                   acc[item.name] = item.type;
                   return acc;
                 }, {});
  
console.log(familyType); // { 철수: boy, 영희:girl, 바둑이: dog}

 

2. Array.prototype.reduceRight()

• reduceRight()는 근본적으로 reduce()와 같은 기능을 합니다.
• 유일한 차이는 배열의 끝에서부터 시작한다는 것입니다.

[문법]

array.reduceRight(function(accumulator, currentValue, currentIndex, arr), initialValue)

* 인자에 대한 설명은 Array.prototype.reduce 참조

[예제]

둘 사이의 차이를 보기 위해 다음과 같은 예제를 살펴봅니다. 같은 배열에 대해서 뺄셈 연산을 수행하는 데 있어서 방향에 따른 결과의 차이를 보여줍니다.

var arr = [10, 100, 1000];
var subtract = arr.reduce((total, value) => total-value);
var subtract_right = arr.reduceRight((total, value) => total-value);

console.log(subtract); // -1090
console.log(subtract_right); // 890

 

각 iteration별 연산되는 값은 다음과 같습니다.

	Reduce()			ReduceRight()
iteration	total	value	반환 값	total	value	반환 값
1	10	100	-90	1000	100	900
2	-90	1000	-1090	900	10	890

 

3. Reference

이 글에서는 비교적 간단하게 개념만 다루어 봤습니다. 저야 잘 사용하지 못하지만 reduce는 활용 방법이 꽤 다양합니다. 이미 잘 정리된 사이트들이 있어서 굳이 따로 정리하기보다는 해당 링크를 남겨놓습니다. Reduce에 대해서 좀 더 자세하게 확인하고 싶으면 다음 사이트를 참고하세요!

[JS #3] 자바스크립트 배열 메서드 3, reduce 100% 활용법 (feat. egghead.io)

[Javascript] 15가지 유용한 map, reduce, filter