JavaScript reduce() 정리

JavaScript reduce() 완벽 정리

reduce() 메서드는 배열의 모든 요소를 순회하며 하나의 결과값으로 누적(축약) 하는 함수입니다.
배열의 합계, 평균, 객체 변환 등 다양한 형태의 집계 작업에 활용됩니다.

기본 문법

array.reduce(function(누적값, 현재값, 인덱스, 배열) {
  return 새로운누적값;
}, 초기값);

매개변수 설명

• 누적값(accumulator): 이전 콜백 함수의 반환값이 누적되어 전달됩니다.
• 현재값(currentValue): 현재 순회 중인 배열의 요소 값입니다.
• 인덱스(index): 현재 요소의 인덱스 번호입니다.
• 배열(array): reduce()가 호출된 원본 배열입니다.
• 초기값(initialValue): 누적값의 초기값으로, 지정하지 않으면 배열의 첫 번째 요소가 기본값으로 사용됩니다.

간단한 예제 – 배열의 합 구하기

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

const sum = numbers.reduce((acc, cur) => acc + cur, 0);

console.log(sum);

출력 결과

15

acc는 누적값, cur은 현재값으로 순회하면서 더해집니다.

초기값을 생략한 경우

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

const sum = numbers.reduce((acc, cur) => acc + cur);

console.log(sum);

출력 결과

10

초기값을 생략하면 첫 번째 요소(1)가 누적값의 초기값이 됩니다.
따라서 두 번째 요소부터 순회가 시작됩니다.

배열의 최대값 구하기

const numbers = [10, 5, 20, 8];

const max = numbers.reduce((acc, cur) => (acc > cur ? acc : cur));

console.log(max);

출력 결과

20

reduce()를 이용하면 별도의 Math.max() 없이 최대값을 구할 수 있습니다.

객체 배열 합계 구하기

const products = [
  { name: '노트북', price: 1500 },
  { name: '마우스', price: 30 },
  { name: '키보드', price: 100 }
];

const total = products.reduce((acc, product) => acc + product.price, 0);

console.log(total);

출력 결과

1630

객체 배열의 속성값(price)을 모두 합산했습니다.

배열을 객체로 변환하기

const fruits = ['사과', '바나나', '사과', '포도', '바나나'];

const count = fruits.reduce((acc, fruit) => {
  acc[fruit] = (acc[fruit] || 0) + 1;
  return acc;
}, {});

console.log(count);

출력 결과

{ 사과: 2, 바나나: 2, 포도: 1 }

reduce()를 이용해 배열의 항목별 개수를 세는 간단한 통계 객체를 만들 수 있습니다.

배열 평탄화(Flatten)

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

const flat = arr.reduce((acc, cur) => acc.concat(cur), []);

console.log(flat);

출력 결과

[1, 2, 3, 4, 5, 6]

이처럼 reduce()를 활용하면 다차원 배열을 쉽게 1차원 배열로 변환할 수 있습니다.

주의할 점

1. 항상 반환값이 누적값이 되어야 합니다.
   콜백 함수 내에서 return을 생략하면 undefined가 누적되어 의도한 결과가 나오지 않습니다.
2. 초기값을 지정하는 것이 안전합니다.
   배열이 비어 있는 경우, 초기값이 없으면 오류가 발생합니다.
3. reduce()는 원본 배열을 변경하지 않습니다.
   새로운 값만 계산하여 반환합니다.

some(), map(), filter()와 비교

메서드                        반환값                                                                     주된 역할

 

map()	변환된 새 배열	배열 요소를 일대일 변환
filter()	조건을 만족하는 새 배열	일부 요소만 추출
reduce()	하나의 결과값	누적 계산 또는 요약 처리

요약

항목                                                 내용

 

메서드	array.reduce(callback, initialValue)
반환값	하나의 누적된 결과값
원본 배열 변경	❌ 없음
초기값 생략 가능	가능하지만 권장되지 않음
주요 용도	합계, 평균, 최대값, 객체 변환, 배열 평탄화 등

결론

reduce()는 배열을 단순히 순회하는 것을 넘어, 데이터를 하나의 결과로 축약하는 강력한 메서드입니다.
숫자 합계뿐 아니라 객체 조합, 배열 변환, 통계 계산 등 다양한 상황에서 활용할 수 있습니다.