Array.reduce() 메서드란?
JavaScript의 Array.reduce() 메서드는 배열의 각 요소에 대해 사용자가 제공한 콜백 함수를 순차적으로 실행하고, 그 결과를 하나의 값으로 누적하여 반환하는 메서드입니다. 이름 그대로 배열 전체를 '줄여서(reduce)' 단일 출력값을 만들어내는 것이 핵심 역할입니다.
reduce()는 다음과 같은 형식으로 사용합니다.
array.reduce(callback(accumulator, currentValue), initialValue)
- accumulator(누산기): 이전 콜백 호출에서 반환된 값이 누적되는 변수
- currentValue: 현재 처리 중인 배열 요소
- initialValue(초기값): 선택 사항이며, 누산기의 시작 값을 지정
예를 들어, 제공된 함수가 덧셈이라면 reduce()는 배열 [1, 2, 3, 4]의 각 요소에 차례로 더하기 연산을 수행하여 최종적으로 단일 결과값인 10을 반환합니다.
예제: 배열 요소의 합 구하기
<html> <body> <p>배열 내 숫자의 합: </p> <script> const array = [1, 2, 3, 4]; const sum = (firstValue, lastValue) => firstValue + lastValue; document.write(array.reduce(sum)); </script> </body> </html>
실행 결과
배열 내 숫자의 합: 10
동작 원리 살펴보기
위 예제에서 reduce()가 실행되는 과정은 다음과 같습니다.
- 1단계: 누산기 = 1, 현재 값 = 2 → 결과 3
- 2단계: 누산기 = 3, 현재 값 = 3 → 결과 6
- 3단계: 누산기 = 6, 현재 값 = 4 → 최종 결과 10
초기값(initialValue) 활용하기
reduce()의 두 번째 인수로 초기값을 지정하면 누산기가 해당 값부터 시작됩니다. 초기값을 생략하면 배열의 첫 번째 요소가 초기값으로 사용되며, 빈 배열에 초기값 없이 reduce()를 호출하면 TypeError가 발생하므로 주의해야 합니다.
const numbers = [1, 2, 3, 4]; // 초기값 10을 지정한 경우 const result = numbers.reduce((acc, cur) => acc + cur, 10); console.log(result); // 20
reduce()의 다양한 활용 사례
reduce()는 단순 합계 외에도 다음과 같은 작업에 널리 활용됩니다.
- 배열 요소의 평균, 최댓값, 최솟값 계산
- 객체 배열에서 특정 속성 값 집계
- 배열을 객체나 Map으로 변환
- 중복 제거 및 데이터 그룹화
이처럼 Array.reduce()는 배열 데이터를 하나의 값으로 응축해야 하는 거의 모든 상황에서 유용하게 사용할 수 있는 강력한 메서드입니다.