[reduce()] 단순 합계부터 데이터 집계까지

728x90

reduce() 

배열의 모든 값을 하나로 '누적(accumulate)'하는 데 특화된 자바스크립트 메서드가 있습니다. 바로 reduce() 입니다. 단순한 합계, 객체 그룹핑, 통계 계산, 중첩 구조 해제 등 다양한 상황에서 쓰입니다.

이 글에서는 reduce() 의 기본 개념부터 고급 활용법까지 자세히 알아보겠습니다.

 

---

1.  reduce()란?

reduce() 는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하여 하나의 최종 결과값으로 줄이는(reduce) 메서드입니다. 기본적으로 누적기를 기반으로 동작하며, 배열을 가공해 숫자, 문자열, 객체 등 어떤 형태든 결과값으로 만들 수 있습니다.

문법

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• callback : 각 요소에 대해 실행할 함수
  • accumulator : 누적된 결과값
  • currentValue : 현재 처리 중인 요소
  • index (선택) : 현재 요소의 인덱스
  • array (선택) : reduce가 호출된 배열
• initialValue (선택) : 초기 누적값

기본 예제 - 합계 계산

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

• acc 는 누적 값 (처음에는 0)
• curr 는 배열의 현재 값

 

---

2.  reduce() 활용 예제

a.  배열 요소의 평균 구하기

const scores = [90, 80, 70];

const average = scores.reduce((acc, curr, _, arr) => acc + curr / arr.length, 0);
console.log(average); // 80

b.  배열을 객체로 변환하기

const entries = [
  ["name", "Alice"],
  ["age", 30],
  ["job", "developer"]
];

const obj = entries.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});

console.log(obj); // { name: 'Alice', age: 30, job: 'developer' }

c.  문자열 연결 (구분자 포함)

const words = ["Hello", "world", "!"];
const sentence = words.reduce((acc, curr) => acc + ' ' + curr);
console.log(sentence); // "Hello world !"

d.  특정 조건에 따라 그룹화하기

const users = [
  { name: "Alice", gender: "female" },
  { name: "Bob", gender: "male" },
  { name: "Eve", gender: "female" }
];

const grouped = users.reduce((acc, user) => {
  const key = user.gender;
  if (!acc[key]) acc[key] = [];
  acc[key].push(user);
  return acc;
}, {});

console.log(grouped);
// {
//   female: [{ name: 'Alice' }, { name: 'Eve' }],
//   male: [{ name: 'Bob' }]
// }

 

---

3.  reduce() 사용 시 주의할 점

a.  initialValue는 꼭 명시하자

initialValue를 생략하면 첫 번째 요소가 초기값으로 사용되며, 빈 배열에서 오류를 유발할 수 있습니다.

[].reduce((acc, curr) => acc + curr); // ❌ TypeError 발생

• 해결 : 항상 initialValue를 명시하는 습관을 들이자

[].reduce((acc, curr) => acc + curr, 0); // ✅ 0

b.  reduce()는 선언형 코드지만 복잡해질 수 있음

• 너무 복잡한 로직은 가독성을 떨어뜨릴 수 있음
• 코드 분리나 주석, 함수 추출을 통해 가독성을 확보하자

 

---

4.  reduce() vs 다른 배열 메서드 비교

메서드	목적	반환값	원본 변경 여부	비고
map()	변형	새 배열	❌	동일 길이 유지
filter()	조건 필터링	새 배열	❌	길이 달라질 수 있음
reduce()	누적 및 집계	단일 값 (or 객체)	❌	초기값 꼭 명시 권장
forEach()	반복 (side effect)	없음	❌	반환값 없음, 주로 출력용 사용

 

---

5.  마무리

• reduce() 는 배열을 하나의 값으로 축약하는 데 사용하는 고차 함수입니다.
• 단순한 합계뿐만 아니라 객체 변환, 그룹화, 통계 등 다양한 데이터 처리 작업에 유용합니다.
• initialValue 를 반드시 지정해 안전하고 일관된 결과를 보장해야 합니다.
• 다른 배열 메서드보다 유연하지만 복잡해질 수 있으니 적절히 사용해야 합니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Array.prototype.reduce()

 

---

반응형