Array.reduce()

Array.reduce()

Array.reduce()는 단순 덧셈을 반복문 없이 쉽게 할 수 있게 만들 어 주는 메소드이다. 

총 4개의 값이 필요한데 간단하게 구조를 보자

원본배열.reduce((이전요소까지의합accumulator, 현재값currentValue)=>accumulator+currentValue, 초기값)

이렇게 이전 요소까지의 합(누산기, accumulator), 현재 값(currentValue), 초기 값, 원본 배열이 필요하다

사용 방법을 예로 들어 보면 <1보다 10까지 요소가 있는 배열 arr의 모든 요소의 합> 을 구하는 문제가 있다고 해보자 기존에는 반복문으로 풀었다면 

let result =0;
for(const el of arr){
	result+=el;
}
return result => 55 출력

이런 방식으로 풀었을 것이다. 동일한 예시에서 reduce를 쓴다면

const result = arr.reduce((total, now)=>total+now, 0);
return result; => 55 출력

이런식으로 나타낼 수 있다.

주의 사항으로는

첫 번째) 초기값은 지정을 안해줄 경우 원본배열의 첫 번째 값을 사용하기 때문에 빈 배열을 사용 할 경우 Type에러가 발생한다.

두 번째) 객체 배열의 덧셈에서 초기값을 지정해주지 않으면 이런 문제가 발생한다

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

console.log(sum) => 6 출력

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

console.log(sum) => [object Object]23 출력

배열의 첫 번째 값인 {x: 1}이 함수를 통하지 않고 바로 누산기에 더해졌기에 1이 아닌 [object Object]가 더해지는 문제가 생겼다.

따라서 가능하면 초기값을 지정해주는 것이 좋다.

 

개인적으로 팀 프로젝트에서도 사용하는데 소스코드를 예시로 보면

const area = areaSorting.reduce((total, now) => total + '&code=' + addressToCode(now), '');

지역명으로 이루어진 배열을 각각의 요소를 함수를 통해 변환 후 누산기에 쿼리문으로 더해 주는 구조이다.

이렇게 reduce는 반복적인 과정을 간편하게 만들어주는 편리한 메소드이다.