JavaScript의 reduce 함수 완벽 가이드

Reduce

JavaScript에서 배열을 처리할 때 유용한 메소드 중 하나인 reduce 의 기본 원리, 주요 매개변수(accumulator와 current value), 그리고 실제 예제 코드를 통해 reduce를 어떻게 활용할 수 있는지 알아보겠습니다.

reduce란 무엇인가?

reduce 함수는 배열의 각 요소를 순회하면서 누적 작업을 수행해 하나의 결과값을 만들어내는 메소드입니다.
간단히 말해, 배열 전체를 하나의 값(숫자, 객체, 배열 등)으로 "축소"할 때 사용됩니다.

주요 매개변수

reduce의 콜백 함수는 최소 두 개의 인자를 받습니다:

• acc (Accumulator)
  이전까지의 누적 결과를 저장합니다. 초기값을 설정하면 해당 값으로 시작하며, 매 순회마다 업데이트된 결과가 다음 순회로 전달됩니다.
• cur (Current Value)
  현재 순회하고 있는 배열의 요소입니다. 각 단계에서 이 값을 기반으로 누적 작업이 수행됩니다.

또한, 선택적으로 currentIndex(현재 요소의 인덱스)와 array(reduce를 호출한 원본 배열)도 사용할 수 있습니다.

reduce 사용 예제

1. 숫자 배열의 합 구하기

간단한 예제로, 배열의 모든 숫자 합계를 구해보겠습니다.

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

// 초기값을 0으로 설정하고, 각 요소를 누적 합산
const sum = numbers.reduce((acc, cur) => {
  return acc + cur;
}, 0);

console.log(sum); // 출력: 15

 

동작 원리:

• 첫 번째 순회: acc는 초기값 0, cur는 1 → 결과: 0 + 1 = 1
• 두 번째 순회: acc는 1, cur는 2 → 결과: 1 + 2 = 3
• ...
• 최종적으로 누적된 합은 15가 됩니다.

2. 배열을 객체로 변환하기 (피봇)

배열의 각 객체를 특정 키 값으로 그룹화하여 하나의 객체로 만드는 예제입니다.

const arr = [
  { id: 1, value: 'a' },
  { id: 2, value: 'b' },
  { id: 3, value: 'c' }
];

const pivoted = arr.reduce((acc, cur) => {
  acc.ids.push(cur.id);
  acc.values.push(cur.value);
  return acc;
}, { ids: [], values: [] });

console.log(pivoted);
// 출력: { ids: [1, 2, 3], values: ['a', 'b', 'c'] }

 

설명:

• acc (Accumulator): 초기값으로 빈 객체 {}를 전달합니다.
• cur (Current Value): 각 순회마다 배열의 현재 객체를 나타냅니다.
• 매 순회마다 cur.id를 키로 하여 해당 객체를 acc에 추가하고, 최종적으로 id를 기준으로 그룹화된 객체를 생성합니다.

추가 매개변수

reduce 콜백 함수는 총 네 개의 인자를 받을 수 있습니다:

1. accumulator (acc): 누적 결과
2. currentValue (cur): 현재 처리 중인 요소
3. currentIndex: 현재 요소의 인덱스 (선택 사항)
4. array: reduce를 호출한 원본 배열 (선택 사항)

필요에 따라 이 추가 인자들을 활용하여 더 복잡한 누적 작업을 구현할 수 있습니다.