JavaScript의 reduce는 배열의 모든 요소를 하나의 결과값으로 “축소”(reduce)해 주는 고차 함수(higher-order function)입니다. 고차 함수란 함수를 인자로 받거나, 함수를 반환하는 함수를 말하는데, reduce는 리듀서 함수(콜백 함수)를 인자로 받습니다.
1. reduce의 기본 시그니처
array.reduce((accumulator, currentValue, currentIndex, array) => {
// 누산기(accumulator)와 현재값(currentValue)을 이용해 새 누산기를 반환
}, initialValue);
- accumulator
지금까지 누적된 결과값을 나타냅니다.
- currentValue
배열 순회 중 현재 처리 중인 요소입니다.
- currentIndex(선택적)
현재 요소의 인덱스(0부터 시작)입니다.
- array(선택적)
reduce를 호출한 원본 배열입니다.
- initialValue
누산기의 초깃값입니다. 제공하지 않으면 배열의 첫 번째 요소가 초깃값이 되고, 순회는 두 번째 요소부터 시작합니다.
2. 동작 원리 예제
(1) 배열 합계 구하기
const numbers = [1, 2, 3, 4, 5];
// initialValue = 0
const sum = numbers.reduce((acc, cur) => {
return acc + cur;
}, 0);
console.log(sum); // 15
- acc=0, cur=1 → 1
- acc=1, cur=2 → 3
- acc=3, cur=3 → 6
… 최종적으로 15 반환
(2) 객체 속성별 개수 세기
const fruits = ['apple', 'banana', 'apple', 'orange', 'banana'];
const countMap = fruits.reduce((acc, fruit) => {
// acc[fruit]가 이미 있으면 +1, 없으면 1
acc[fruit] = (acc[fruit] || 0) + 1;
return acc;
}, {});
console.log(countMap);
// { apple: 2, banana: 2, orange: 1 }
(3) 중첩 배열 평탄화(flatten)
const nested = [[1, 2], [3, 4], [5]];
const flat = nested.reduce((acc, arr) => {
return acc.concat(arr);
}, []);
console.log(flat); // [1, 2, 3, 4, 5]
3. 고차 함수로서의 특징
- 함수 인자로 콜백을 받는다
reduce(callback, initialValue) 형태로, 콜백 함수를 통해 누적 로직을 정의합니다.
- 함수를 반환하진 않지만, 내부 로직 제어를 함수로 위임한다는 점에서 고차 함수입니다.
4. initialValue 주의사항
- 값이 없는 빈 배열에
initialValue 없이 reduce를 호출하면 오류가 납니다.
- 복잡한 자료형(객체, 배열)으로 결과를 만들 때는 빈 객체
{}나 빈 배열 []을 초기값으로 반드시 지정하세요.
요약
reduce는 배열을 순회하며 하나의 값으로 축소하는 고차 함수입니다.- 누산기(accumulator)와 현재값(currentValue)을 인자로 받는 콜백을 정의해, 원하는 형태로 결과를 누적할 수 있습니다.
- 합계, 개수 세기, 평탄화, 최대/최소 찾기 등 다양한 패턴을 구현할 때 유용합니다.
직접 여러 예제를 손으로 따라 써 보시면서, 단계별로 누산기가 어떻게 변하는지 디버깅해 보면 감을 더 빠르게 잡으실 수 있을 거예요!