reduce
메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값
을 다음 순회 시에 콜백 함수의 첫 번째 인수
로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다.
이때 원본 배열은 변경되지 않는다.
reduce 메서드는 첫번째 인수로 콜백 함수
, 두 번째 인수로 초기값
을 전달받는다.
reduce 메서드의 콜백함수에는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값
, reduce 메서드를 호출한 배열의 요소값
과 인덱스
, reduce 메서드를 호출한 배열 자체
즉, this가 전달된다.
// 1부터 4까지 누적을 구한다. const sum = [1, 2, 3, 4].reduce((accumulator, currentValue, index, array) => accumulator + currentValue,0) // 0은 두번째 인수로 초기값 console.log(sum); // 10
const values = [1, 2, 3, 4, 5, 6]; const average = values.reduce((acc, cur, i, { length }) => { //마지막 순회가 아니면 누적값을 반환하고 마지막 순회면 누적값으로 평균을 구해 반환 return i === length - 1 ? (acc + cur) / length : acc + cur; },0); console.log(average); // 3.5
const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];
const count = fruits.reduce((acc,cur) => {
// 첫 번째 순회 시 acc는 초기값인 {}이고 cur은 첫번째 요소인 'banana'다
// 초기값으로 전달받은 빈 객체에 요소값인 cur을 프로퍼티 키로, 요소의 개수를
// 프로퍼티 값으로 할당한다.
// 만약 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티 값을 1로 초기화한다.
acc[cur] = (acc[cur] || 0) + 1; // undefined || 0 은 0
// 1 || 0 은 1
return acc;
},{});
// 콜백 함수는 총 5번 호출되고 다음과 같이 결과값을 반환한다.
/*
{banana : 1} => {banana : 1, apple : 1} => {banana : 1, apple : 1, orange : 1} => {banana : 1, apple : 1, orange : 2} => {banana : 1, apple : 2, orange : 2}
*/
console.log(count); // {banana : 1 , apple : 2, orange : 2}