[Javascript] Array.reduce() 사용하기

개요

배열 각 요소들에 대한 처리 후, 하나의 형태로 값을 얻어야 하는 경우가 상당히 많은데, 그 동안은 for, forEach 등의 구문을 많이 사용했었습니다.

그러다가 reduce() 함수가 아주 유연하게 이용될 수 있음을 알게 되어 소개해 보고자 합니다.

---

각 배열 요소 다루기

다음은 간단한 배열의 합을 for 문을 이용하여 구하는 일반적인 코드입니다.

const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let sum = 0;
for (let index = 0 ; index < array1.length ; index++)
    sum += array1[index];

console.log(`array1 summary = ${sum}`);

위 코드를 reduce() 함수를 이용하여 구현하면 아래와 같이 간단해 집니다.

const array1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const sum = array1.reduce((s, v) => s += v, 0);

console.log(`array1 summary = ${sum}`);

reduce() 함수의 첫 번째 인자는 배열 각 요소를 처리할 함수이고, 두 번째 인자는 함수에 적용할 초기값을 입력합니다.

첫 번째로 전달하는 함수는 네 개의 매개변수를 갖을 수 있습니다.

첫 번째는 누산기로, reduce() 함수의 두 번째로 입력된 값으로 초기화됩니다.
두 번째는 배열의 현재 요소 값입니다.
세 번째는 배열 요소의 인덱스 값입니다.
네 번째는 reduce() 함수를 호출한 원본 배열입니다.

위 예제에서는 첫 번째로 전달하는 함수에서 세 번째 배열의 요소 인덱스와 네 번째 원본 배열의 참조는 생략하여 호출하였습니다.

---

다차원 배열에 reduce() 적용하기

다음과 같은 2차원 배열에 대하여, 최대값을 구하고자 한다면 for 문을 중첩하여 작성하게 됩니다.

const array2 = [ [1, 2, 3, 4], [5, 6, 7, 8, 9], [5, 8, 11, 2] ];
let max = -100;
for (let index1 = 0 ; index1 < array2.length ; index1++)
    for (let index2 = 0 ; index2 < array2[index1].length ; index2++)
        max = Math.max(max, array2[index1][index2]);

console.log(`array2 max = ${max}`);

reduce() 함수도 두 번 중첩하여 작성할 수 있습니다.

const array2 = [ [1, 2, 3, 4], [5, 6, 7, 8, 9], [5, 8, 11, 2] ];
let max = array2.reduce( (m, va) => va.reduce( 
    (mm, vv) => Math.max(mm, vv), m)
    , -100 );
console.log(`array2 max = ${max}`);

reduce() 함수를 이용하면 배열을 순회하며 처리한 결과를 끄집어 낼 때, 반복문을 이용하는 것보다 깔끔하게 작성할 수 있습니다.

---

참고자료

• "Array.prototype.reduce() by MDN":https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce