TIL052 Array.reduce() 활용하기

2차 프로젝트를 진행하면서 배열안의 객체안의 밸류값에 대해 총합을 구해야하는 일이 생겼고, 그에 따라 reduce 메서드를 어떻게 활용할 수 있을지 고민했다. 오늘은 그 방법을 공유하고자 한다.

reduce() 메서드는 다들 알다시피...! 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환하는 메서드이다.(참고) 이름처럼 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행한다.

예를 들면 이렇게 동작한다.
아래는 1부터 10까지 더하는 예제이다.

const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
const initValue = 0;
 
const totalResult = numberList.reduce((initialValue, currentValue, currentIndex, array) => {
    return initialValue + currentValue;
}, initValue);

여기서 메서드에 사용된 인자를 보면, 콜백함수와 initValue(선택사항), 두 개를 전달하고 있다.
콜백함수에서는 총 4개의 인자를 지정할 수 있다. 인자들이 조금 많아서 복잡하게 느껴질 수 있는데, 하나 하나 살펴보면 아래와 같다.

• initialValue: 메서드의 두번째 인자인 initValue가 여기로 넘어온다. 초기값을 지정해준다.
• currentValue: numberList의 첫번째 데이터 1이 넘어온다.
• currentIndex: reduce() 함수의 두번째 인자 인 initValue 를 사용했는지 안했는지에 따라 값이 달라진다.
• array: 함수가 호출된 배열, numberList가 넘어온다.

const fruit = ['apple', 'grape', 'banana', 'apple', 'orange', 'grape', 'apple', 'orange'];
 
const result = fruit.reduce((object, currentValue) => {
    if (!object[currentValue]) {
        object[currentValue] = 0;
    }
    object[currentValue]++;
 
    return object;
}, {});
 
console.log(result);

위의 예제는 reduce 메서드를 사용하여 fruit리스트에 있는 과일별 수량을 계산하여 object로 반환하는 예제이다. 그 결과값은 아래와 같이 나온다.

{apple: 3,
grape: 2,
banana: 1,
orange: 2}

그렇다면 최초의 질문과 같이 배열안의 객체의 밸류값의 합은 어떻게 구할까?

이를테면 아래와 같은 데이터가 있다고 해보자. 아래의 데이터에서 특정 제품의 가격에 수량을 곱한 값의 총합을 알려면 어떻게 해야할까? 이때도 reduce 메서드를 활용하여 해결할 수 있다.

[{id: 1, price: 30, quantity: 2},
 {id: 2, price: 20, quantity: 4},
 {id: 3, price: 10, quantity: 2}]

const sumTotal = arr =>
  arr.reduce((sum, { price, quantity }) => sum + price * quantity, 0)
const data = [
  { id: 1, price: 30, quantity: 2 },
  { id: 2, price: 20, quantity: 4 },
  { id: 3, price: 10, quantity: 2 },
]
const total = sumTotal(data)
console.log(total) // 160

혹은 이렇게 할 수도 있다.

let items = [
  {id: 1, price: 30, quantity: 2}, 
  {id: 2, price: 20, quantity: 4}, 
  {id: 3, price: 10, quantity: 2}
]
let total = items.reduce((sum,item) => sum += item.price * item.quantity, 0);
console.log(total);