[JavaScript] 배열 reduce 메서드

Array.prototype.reduce()

자바스크립트의 reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 이떄 원본 배열은 변경되지 않는다.

 

reduce 메서드는 첫 번째 인수로 콜백 함수, 두 번째 인수로 초기값을 전달받는다. reduce 메서드의 콜백 함수에는 4개의 인수, 초기값 또는 콜백 함수의 이전 반환값, reduce 메서드를 호출한 배열의 요소값과 인덱스, reduce 메서드를 호출한 배열 자체 즉 this가 전달된다.

 

reduce(callbackFn)
reduce(callbackFn, initialValue)

 

파라미터

1. callback function

• 배열의 각 요소에 대해 실행할 함수. 다음 4가지의 인수를 가진다.
  • accumulator : 콜백 함수의 반환값을 누적한다.
  • currentValue : 배열의 현재 요소
  • index(Optional) : 배열의 현재 요소의 인덱스
  • array(Optional) : 호출한 배열
• 콜백 함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환한다.

2. initialValue(Optional)

• 최초 콜백 함수 실행시 accumulator 인수에 제공되는 값
• 초기값을 제공하지 않을 경우 배열의 첫 번째 요소를 사용한다.
• 빈 배열에서 초기값이 없을 경우 에러가 발생하기 때문에 reduce 메서드 호출할 때는 초기값을 전달하는 것이 안전하다.

반환값

배열을 순서대로 불러 각 요소에 대해 콜백 함수를 실행한 결과를 누적한 하나의 결과값.

 

예제

1. 배열의 모든 값 (1부터 4까지) 더하기

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (accumulator, currentValue) => accumulator + currentValue,
  initialValue
);

console.log(sumWithInitial); // Expected output: 10

// 또 다른 방식
const arr = [1, 2, 3, 4]
const sum = arr.reduce((accumulator, currentValue, index, array) => accumulator + currentValue, 0);

console.log(sum); // 10

 

2. 평균 구하기

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

 

3. 요소의 중복 횟수 구하기

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;
    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 }

 

4. 객체의 특정 프로퍼티 값 합산하기

const products = [
	{ id: 1, price = 100 },
    { id: 2, price = 200 },
    { id: 3, price = 300 }
];

// 1 번째 순회 시 acc 는 { id: 1, price: 100 }, cur 는 { id: 2, price: 200 } 이고
// 2 번째 순회 시 acc 는 300, cur 는 { id: 3, price: 300 }
// 2 번째 순회 시 acc 에 함수에 객체가 아닌 숫자값이 전달된다. 이때 acc.price는 undefined

const priceSum = products.reduce((acc, cur) => acc.price + cur.price);

console.log(priceSum); // NaN

이처럼 객체의 특정 프로퍼티 값을 합산하는 경우에는 반드시 초기값을 전달해야 한다.

const products = [
	{ id: 1, price = 100 },
    { id: 2, price = 200 },
    { id: 3, price = 300 }
];

// 1 번째 순회 : acc => 0, cur => { id: 1, price: 100 } 
// 2 번째 순회 : acc => 100, cur => { id: 2, price: 200 } 
// 3 번째 순회 : acc => 300, cur => { id: 3, price: 300 }

const priceSum = products.reduce((acc, cur) => acc + cur.price, 0);

console.log(priceSum); // 600