[JS] reduce 메서드 완벽 가이드

1. 들어가며

JavaScript의 reduce() 메서드는 배열의 모든 요소를 순회하며 단일 값으로 축약하는 강력한 기능을 제공합니다. map()이나 filter()와 함께 가장 많이 사용되는 고차 함수 중 하나로, 데이터를 누적 처리하거나 변환할 때 유용합니다. 이 글에서는 reduce() 메서드의 동작 원리, 다양한 사용 사례, 그리고 실무에서의 활용 방법까지 상세히 다뤄보겠습니다.

---

2. reduce 메서드란?

2.1 정의

• reduce()는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하며, 그 결과를 누적(accumulate)하여 단일 값으로 반환합니다.
• 문법:
• array.reduce(callback(accumulator, currentValue, index, array), initialValue);

2.2 매개변수 설명

1. callback: 배열의 각 요소에 대해 실행되는 함수.
   • accumulator: 이전 콜백의 반환 값(누적 값).
   • currentValue: 현재 처리 중인 배열 요소.
   • index(선택): 현재 요소의 인덱스.
   • array(선택): reduce()를 호출한 배열.
2. initialValue(선택): accumulator의 초기 값. 제공하지 않으면 배열의 첫 번째 요소가 초기 값이 됩니다.

---

3. 기본 사용법

3.1 초기 값 없이 사용

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr);
console.log(sum); // 10

• accumulator의 초기 값은 배열의 첫 번째 요소로 설정됩니다.

3.2 초기 값을 제공하여 사용

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

• initialValue로 0을 제공하여 누적을 시작합니다.

---

4. reduce 메서드의 다양한 활용 예제

4.1 배열 요소의 합계 구하기

const numbers = [1, 2, 3, 4, 5];
const total = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(total); // 15

4.2 배열의 최대값 찾기

const numbers = [10, 20, 30, 40];
const max = numbers.reduce((acc, curr) => (acc > curr ? acc : curr));
console.log(max); // 40

4.3 배열의 중복 제거

const items = [1, 2, 2, 3, 4, 4, 5];
const uniqueItems = items.reduce((acc, curr) => {
  if (!acc.includes(curr)) {
    acc.push(curr);
  }
  return acc;
}, []);
console.log(uniqueItems); // [1, 2, 3, 4, 5]

4.4 객체 배열의 값 합산

const products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 700 }
];
const totalPrice = products.reduce((acc, curr) => acc + curr.price, 0);
console.log(totalPrice); // 2200

4.5 그룹화하기

const data = [
  { category: 'fruit', name: 'apple' },
  { category: 'vegetable', name: 'carrot' },
  { category: 'fruit', name: 'banana' }
];

const grouped = data.reduce((acc, curr) => {
  if (!acc[curr.category]) {
    acc[curr.category] = [];
  }
  acc[curr.category].push(curr.name);
  return acc;
}, {});
console.log(grouped);
// {
//   fruit: ['apple', 'banana'],
//   vegetable: ['carrot']
// }

---

5. 실무에서의 활용 팁

5.1 초기 값 설정의 중요성

• 항상 initialValue를 설정하는 것이 좋습니다. 초기 값을 설정하지 않으면 예상치 못한 결과가 발생할 수 있습니다.

5.2 디버깅 팁

• 디버깅 중 각 단계의 값을 확인하려면 console.log()를 활용하세요.
• const result = [1, 2, 3].reduce((acc, curr) => { console.log(acc, curr); return acc + curr; }, 0);

5.3 복잡한 로직은 함수로 분리

• reduce() 내부의 로직이 복잡하다면, 별도의 함수로 분리하여 가독성을 높이세요.
• const add = (acc, curr) => acc + curr; const numbers = [1, 2, 3]; const sum = numbers.reduce(add, 0); console.log(sum); // 6

---

6. 결론

JavaScript의 reduce() 메서드는 단순히 배열을 축약하는 것 이상으로 강력한 기능을 제공합니다. 데이터를 집계하거나 변환할 때 매우 유용하며, 다양한 문제를 해결할 수 있는 유연한 도구입니다. 실무에서 이를 적절히 활용하면 더욱 간결하고 효율적인 코드를 작성할 수 있습니다. 이 글에서 다룬 내용을 바탕으로 reduce()를 적극적으로 활용해 보세요!

---