[JavaScript] reduce() 사용법 알아보기 [JS기초 함수]

Reduce()란? 

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

 

Array.reduce() 구문

Array.reduce(( accumulator, currentValue, currentIndex, array) => {
     return 누적 계산의 결과 값
}, initialValue)

• accumulator : 누산값으로 콜백으로 반환된 값을 누적합니다.
• currentValue : 처리할 현재 요소
• currentIndex : 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0 또는 1부터 시작합니다.
• array : reduce()를 호출한 배열  (위 예시에서는 Array)
• initialValue : 초기값, 생략할 경우 배열의 첫 번재 요소를 사용합니다.

Array.reduce() 설명

reduce()는 주어진 콜백을 실행합니다.
콜백 함수가 호출될 때 만약 initialValue가 제공된다면, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다. initialValue가 제공되지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 배열의 두 번째 값과 같습니다.

1. initialValue 제공 => accumulator = initialValue
                                       currentValue = Array[0]

2. initialValue 제공 X => accumulator = Array[0]
                                         currentValue = Array[1]

var maxNum = (acc, cur) => Math.max(acc.x, cur.x);

// initialValue값 없이 reduce()
[{ x: 22 }, { x: 42 }].reduce(maxNum); // 42
[{ x: 22 }].reduce(maxNum); // { x: 22 }
[].reduce(maxNum); // TypeError

※ 초기값이 없으면 출력 가능한 형식이 세 가지이므로, 초기값을 주는 것이 안전합니다.

 

Array.reduce() 작동 방식, 예제

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

콜백이 4번 호출됩니다. 각 호출의 인수와 반환값은 다음과 같습니다.

reduce()가 반환하는 값으로는 마지막 콜백 호출의 반환값(10)을 사용합니다.

 

정리

reduce() 함수는 배열에 내장되어 있는 메소드로 배열의 모든 값을 합산하거나, 값의 개수를 세거나, 객체를 분류할 수 있으므로 매우 유용하게 쓰일 수 있다.

 

Array.prototype.reduce() - JavaScript | MDN (mozilla.org

Array.prototype.reduce() - JavaScript | MDN