JavaScript reduce() 함수

📌 reduce() 함수란?

reduce() 함수는 배열의 모든 요소에 대해 누적된 계산을 수행하여 하나의 값으로 만드는 함수다. 배열의 값들을 합산하거나, 객체로 변환하거나, 배열을 변형할 때 매우 유용하다.

---

🎯 기본 문법

배열.reduce((누적값, 현재값, 인덱스, 배열) => {
  // 처리 로직
  return 새로운누적값;
}, 초기값);

• 누적값(accumulator): 이전 계산 결과 저장
• 현재값(currentValue): 배열의 현재 요소
• 인덱스(index): 현재 요소의 인덱스 (선택)
• 배열(array): reduce를 호출한 배열 (선택)
• 초기값: 누적값의 시작 값 (선택, 생략 시 배열의 첫 번째 요소)

---

💡 기본 예제

예제 1: 배열의 합 구하기

#### const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum);
// 출력: 15
// 계산 과정: 0 + 1 + 2 + 3 + 4 + 5 = 15

예제 2: 배열의 곱 구하기

const numbers = [1, 2, 3, 4];
const product = numbers.reduce((acc, curr) => acc * curr, 1);

console.log(product);
// 출력: 24
// 계산 과정: 1 × 1 × 2 × 3 × 4 = 24

예제 3: 최댓값 찾기

const numbers = [10, 5, 30, 15, 20];
const max = numbers.reduce((acc, curr) => 
  curr > acc ? curr : acc
);

console.log(max);
// 출력: 30

---

🔧 파라미터 상세 설명

1) 누적값(accumulator)과 현재값(currentValue)

const numbers = [10, 20, 30];
numbers.reduce((acc, curr) => {
  console.log(`누적값: ${acc}, 현재값: ${curr}`);
  return acc + curr;
}, 0);

// 출력:
// 누적값: 0, 현재값: 10
// 누적값: 10, 현재값: 20
// 누적값: 30, 현재값: 30

2) 초기값의 중요성

const numbers = [1, 2, 3];

// 초기값 있음
console.log(numbers.reduce((acc, curr) => acc + curr, 0));
// 출력: 6

// 초기값 없음 (첫 번째 요소가 초기값)
console.log(numbers.reduce((acc, curr) => acc + curr));
// 출력: 6 (같은 결과지만 시작이 다름)

3) 인덱스와 배열 파라미터

const numbers = [10, 20, 30];
numbers.reduce((acc, curr, index, array) => {
  console.log(`인덱스: ${index}, 현재값: ${curr}, 배열: [${array}]`);
  return acc + curr;
}, 0);

// 출력:
// 인덱스: 0, 현재값: 10, 배열: [10,20,30]
// 인덱스: 1, 현재값: 20, 배열: [10,20,30]
// 인덱스: 2, 현재값: 30, 배열: [10,20,30]
// 최종 반환값: 60

---

📚 실전 예제들

예제 1: 객체 배열에서 특정 속성 합산

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

const totalPrice = products.reduce((acc, curr) => {
  return acc + curr.price;
}, 0);

console.log(totalPrice);
// 출력: 1650

예제 2: 배열을 객체로 변환

const fruits = ["apple", "banana", "orange"];

const fruitCount = fruits.reduce((acc, curr) => {
  acc[curr] = 1;
  return acc;
}, {});

console.log(fruitCount);
// 출력: { apple: 1, banana: 1, orange: 1 }

예제 3: 배열 요소별 개수 세기

const fruits = ["apple", "banana", "apple", "orange", "banana", "apple"];

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

console.log(count);
// 출력: { apple: 3, banana: 2, orange: 1 }

예제 4: 배열 평탄화 (다차원 배열을 1차원으로)

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

const flattened = nested.reduce((acc, curr) => {
  return acc.concat(curr);
}, []);

console.log(flattened);
// 출력: [1, 2, 3, 4, 5, 6]

예제 5: 조건에 따라 배열 분류

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

const grouped = numbers.reduce((acc, curr) => {
  if (curr % 2 === 0) {
    acc.even.push(curr);
  } else {
    acc.odd.push(curr);
  }
  return acc;
}, { even: [], odd: [] });

console.log(grouped);
// 출력: { even: [2, 4, 6], odd: [1, 3, 5] }

예제 6: 평균 구하기

const numbers = [10, 20, 30, 40, 50];

const average = numbers.reduce((acc, curr, index, array) => {
  acc += curr;
  // 마지막 요소일 때 평균 계산
  return index === array.length - 1 ? acc / array.length : acc;
}, 0);

console.log(average);
// 출력: 30

예제 7: 문자열 연결

const words = ["Hello", "World", "JavaScript"];

const sentence = words.reduce((acc, curr) => {
  return acc + " " + curr;
});

console.log(sentence);
// 출력: "Hello World JavaScript"

---

⚠️ 자주 하는 실수

실수 1: 초기값 생략으로 인한 타입 오류

// ❌ 잘못된 예
const mixed = [1, 2, 3];
const result = mixed.reduce((acc, curr) => acc + curr); // 문자와 숫자 혼합 시 문제 가능
// 초기값이 없으면 첫 요소가 초기값이 됨

// ✅ 올바른 예
const result = mixed.reduce((acc, curr) => acc + curr, 0);

실수 2: 누적값 반환하지 않기

// ❌ 잘못된 예
const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, curr) => {
  acc + curr; // 반환하지 않음! undefined가 누적됨
}, 0);

// ✅ 올바른 예
const sum = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);

실수 3: 원본 배열 변경

// ❌ 문제가 될 수 있는 예
const products = [
  { name: "상품1", price: 100 },
  { name: "상품2", price: 200 }
];

const total = products.reduce((acc, curr) => {
  curr.price = curr.price * 1.1; // 원본이 변경됨!
  return acc + curr.price;
}, 0);

// ✅ 더 좋은 예
const total = products.reduce((acc, curr) => {
  return acc + curr.price;
}, 0);

---

🔄 reduce()와 다른 메서드 비교

map() vs reduce()

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

// map: 배열을 변형 (길이 유지)
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8]

// reduce: 배열을 하나의 값으로 (길이 변함)
const sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

filter() vs reduce()

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

// filter: 조건에 맞는 요소만 필터링
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

// reduce: 조건에 따라 누적
const evenSum = numbers.reduce((acc, n) => 
  n % 2 === 0 ? acc + n : acc, 0
);
console.log(evenSum); // 12

---

📝 요약

기능	설명
기본 사용	배열.reduce((acc, curr) => {...}, 초기값)
반환값	누적된 하나의 값
원본 변경	아니오 (새로운 값 생성)
초기값	선택사항 (생략 시 첫 요소가 초기값)
용도	합계, 객체 변환, 필터링, 그룹핑 등

---

🎓 마치며

reduce() 함수는 처음에는 복잡해 보이지만, 배열의 데이터를 효율적으로 처리하는 강력한 도구다. 처음부터 완벽하게 이해하지 못해도 괜찮다. 다양한 예제를 직접 코드에 입력해보고 단계별 계산 과정을 추적하다 보면 점점 자연스러워질 것이다.

특히 복잡한 데이터 변환 작업이 필요할 때 reduce가 얼마나 유용한지 깨닫게 될 것이다.