[Javascript] reduce 함수를 통한 합산, 감산, 비교 예제 및 유의사항

reduce는 배열형식의 데이터를 1개의 데이터로 합칠때 사용한다. 숫자형 배열에서 하나의 값으로 합치거나, 빼는 등의 연산을 간략히 수행할 수 있다.

 

아래는 숫자배열 내 모든 요소를 합산(Sum)하는 예제이다.

[1,2,3].reduce((a,b) => a+b, 0)

// 6을 반환한다.

 

비교도 가능하다. 다음은 큰 값(Max)을 구하는 예제이다.
일반적으론 Math.max(...[1,2,3]) 가 잘쓰인다.

[1,2,3].reduce((a,b) => a>b? a : b)
// 실행결과 3

 

 

문자 배열에선 각 요소를 하나의 문자열로 합쳐 출력하게 된다. 일반적으론 join을 더 많이 쓰게 되므로 문자형식의 배열에선 잘 쓰지 않는다.

['1','2','3'].reduce((a,b) => a+b, '0') // reduce를 이용한 문자합치기
['0','1','2','3'].join('') // join을 이용한 문자합치기

// 모두 '0123' 이란 문자열을 반환한다.

 

객체형식도 가능하다. 아래는 {a,b}  라는 멤버변수를 가진 json 오브젝트 배열에 대한 합산처리 예제이다.

[{a:1,b:1},{a:2,b:2},{a:3,b:3}].reduce((x,y) => { return { a:x.a + y.a, b:x.b + y.b }}, {a:0, b:0})
// 실행결과 { a: 6, b: 6 }

 

 

각 유형별 reduce 사용예제에서 초기값(initialValue) 0, '0', {a:0, b:0} 은 필수가 아닌 매개변수이지만, 연산을 처리할 배열이 빈 배열일 가능성이 있다면 반드시 추가해주는 것이 좋다. 그렇지 않으면 에러를 유발한다.

[].reduce((a,b) => a+b)
Uncaught TypeError: Reduce of empty array with no initial value
    at Array.reduce (<anonymous>)