[javascript] reduce 메서드의 다양한 활용

reduce 를 활용하면, 정말 복잡한 계산도 편리하게 처리할 수 있다. 오늘은  이 메서드를 이용해서 간단하게 활용할 수 있는 예시를 정리해볼 것이다.

평균 계산

 reduce 의 가장 편리한 점 중 하나는 누적값을 반환하는 변수가 내장되어 있다는 점이다. 이를 활용하면 조건에 일치하는 지점에서 평균을 쉽게 구할 수 있다.

const numbers = [10, 20, 30, 40, 50];

const average = numbers.reduce((acc, current, index, array) => {
  acc += current;
  if (index === array.length - 1) {
    return acc / array.length;
  } else {
    return acc;
  }
}, 0);

console.log(average); // 30

 

최댓값 찾기

  reduce 의 편리한 점 두 번째는 반환된 값이 max에 저장되므로, 이 값을 활용하여 최댓값과 최솟값 등을 쉽게 구할 수 있다. 아래 예제를 보면 초깃값을 지정하는 부분에 배열의 0 번째 요소인 5를 넣어두고, 해당 값이 현재 요소와 비교해서 작다면 현재 요소를 반환하도록 되어 있다. 즉, max 보다 current 가 크다면 current 가 반환되어 다음 max 변수에 저장된다. 

const values = [5, 2, 8, 1, 6];

const maxValue = values.reduce((max, current) => {
  return current > max ? current : max;
}, values[0]);

console.log(maxValue); // 8

 

객체 속성 합산

객체 리터럴이라도 배열 리터럴의 요소로 취급가능 하므로 이를 활용해서 객체의 특정 프로퍼티를 합산한 결과를 반환할 수 있다. 아래 코드를 보면 초기값으로 {} 빈 객체가 지정되어 있으므로 초기 acc 는 expenses[0] 번째 객체인 요소가 된다. 

 

reduce 의 경우 원본 배열을 파괴하지 않는 비파괴적 메서드 이기 때문에, 프로퍼티의 중복을 제거하고, 값을 합산한 새로운 배열을 생성하여 반환할 수 있다.

const expenses = [
  { category: 'Food', amount: 50 },
  { category: 'Transportation', amount: 30 },
  { category: 'Food', amount: 20 },
  { category: 'Shopping', amount: 70 },
];

const totalExpensesByCategory = expenses.reduce((acc, expense) => {
  const category = expense.category;
  acc[category] = (acc[category] || 0) + expense.amount;
  return acc; // 최종적으로 { Food: 70, Transportation: 30, Shopping: 70 } 이 반환된다.
}, {});

console.log(totalExpensesByCategory);
// { Food: 70, Transportation: 30, Shopping: 70 }

 

 

중복 제거

reduce를 활용하면 중복된 요소도 쉽게 제거할 수 있다. 아래 코드에서 includes 메서드는 일치하는 요소가 존재하면 true 를 반환하고, 그 이후의 요소는 순회하지 않는 특징이 있다. 이를 이용하면 최초로 발견된 요소만 acc 에 push 되어 최종적으로 반환 되므로 중복이 제거된 요소만 반환받을 수 있게 된다. 

const numbersWithDuplicates = [1, 2, 3, 4, 2, 5, 1, 6];

const uniqueNumbers = numbersWithDuplicates.reduce((acc, current) => {
  if (!acc.includes(current)) {
    acc.push(current);
  }
  return acc;
}, []);

console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6]