자바스크립트 reduce()

reduce()는 자바스크립트 배열의 메서드로, 배열의 각 요소를 순차적으로 처리하여 하나의 값으로 축약하는 기능을 합니다. reduce()는 배열의 모든 요소에 대해 주어진 콜백 함수를 실행하고, 그 결과를 누적하여 최종 값을 반환합니다. 이 과정에서 이전 단계의 반환 값이 다음 단계의 입력 값으로 사용됩니다.

기본 문법:

array.reduce(callback(accumulator, currentValue, index, array), initialValue);

매개변수:

• callback: 배열의 각 요소에 대해 호출되는 함수. 총 4가지 인자를 받습니다:
  • accumulator: 이전 단계에서 반환된 누적 값.
  • currentValue: 현재 처리 중인 배열 요소.
  • index (선택 사항) : 현재 처리 중인 배열 요소의 인덱스.
  • array (선택 사항) : reduce()가 호출된 원본 배열.
• initialValue (선택 사항) : accumulator의 초기값을 설정합니다. 이 값이 제공되지 않으면 배열의 첫 번째 요소가 초기값으로 사용됩니다.

간단한 예시:

1. 배열 요소들의 합 구하기: 배열의 모든 숫자 요소를 더하는 예시입니다.

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum);  // 출력: 15

설명:

acc는 누적 값(첫 번째 단계에서는 initialValue, 그 이후에는 이전 단계의 결과).

cur는 현재 배열 요소입니다.

0은 acc의 초기값입니다.

실행 순서는 다음과 같습니다:

초기값 acc = 0에서 시작.

acc + cur 연산이 진행되며, 결과가 다음 단계로 누적됩니다.

첫 번째 단계: 0 + 1 = 1

두 번째 단계: 1 + 2 = 3

세 번째 단계: 3 + 3 = 6

네 번째 단계: 6 + 4 = 10

다섯 번째 단계: 10 + 5 = 15

최종적으로 15가 반환됩니다.

 

2. 배열 요소들의 곱 구하기: 배열의 모든 숫자 요소를 곱하는 예시입니다.

const numbers = [1, 2, 3, 4];
const product = numbers.reduce((acc, cur) => acc * cur, 1);
console.log(product);  // 출력: 24

첫 번째 단계: 1 * 1 = 1

두 번째 단계: 1 * 2 = 2

세 번째 단계: 2 * 3 = 6

네 번째 단계: 6 * 4 = 24

 

3. 객체 배열에서 특정 속성 값 추출: 배열이 객체로 구성된 경우, 객체의 특정 속성만 추출하여 값을 합산할 수도 있습니다.

const products = [
  { name: 'Shirt', price: 30 },
  { name: 'Pants', price: 50 },
  { name: 'Shoes', price: 70 }
];

const totalPrice = products.reduce((acc, product) => acc + product.price, 0);
console.log(totalPrice);  // 출력: 150

설명:

각 product 객체에서 price 속성을 가져와 누적 값에 더해줍니다.

acc의 초기값은 0입니다.

 

4. 배열을 객체로 변환하기: reduce()를 사용해 배열을 객체로 변환할 수 있습니다. 예를 들어, 배열을 인덱스를 키로 하는 객체로 변환할 수 있습니다.

const fruits = ['apple', 'banana', 'cherry'];

const fruitObject = fruits.reduce((acc, fruit, index) => {
  acc[index] = fruit;
  return acc;
}, {});

console.log(fruitObject);
// 출력: { 0: 'apple', 1: 'banana', 2: 'cherry' }

설명:

acc는 빈 객체 {}로 시작하고, 각 배열 요소가 인덱스 번호를 키로 하여 객체에 추가됩니다.

 

5. 중복 제거: reduce()와 배열 메서드를 조합하여 배열에서 중복 요소를 제거할 수도 있습니다.

const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = numbers.reduce((acc, cur) => {
  if (!acc.includes(cur)) {
    acc.push(cur);
  }
  return acc;
}, []);
console.log(uniqueNumbers);  // 출력: [1, 2, 3, 4, 5]

설명:

acc는 빈 배열로 시작하고, cur가 acc에 포함되지 않을 때만 acc에 추가하여 중복을 제거합니다.

reduce()의 특징:

• 누적 연산: reduce()는 배열을 순회하며 이전의 결과를 누적하여 마지막에 하나의 값으로 축약합니다.
• 원본 배열은 변경되지 않음: reduce()는 원본 배열을 변경하지 않고, 새로운 값 또는 객체를 반환합니다.
• 초기값: 초기값(initialValue)을 설정할 수 있으며, 설정하지 않으면 배열의 첫 번째 요소가 기본값으로 사용됩니다.

요약:

• reduce()는 배열의 모든 요소를 하나로 축약할 때 사용되는 메서드입니다.
• 콜백 함수와 함께 누적 값을 반환하며, 이를 통해 합산, 곱셈, 객체 변환 등 다양한 작업을 수행할 수 있습니다.
• 매우 강력하고 유연한 메서드이므로, 배열 데이터를 처리할 때 다양한 용도로 활용할 수 있습니다.