[Javascript] reduce 함수: 너도 나도 궁금한 데이터 요리사의 비밀 🥄

reduce 함수 톺아보기! 🥄

자바스크립트 reduce 함수는 배열을 하나의 값으로 “축약”하는 만능 데이터 요리 도구입니다. 그냥 숫자나 문자열만 더하는 게 아니라, 배열을 원하는 형태로 조리(?)할 수 있어요.

 

그럼 이제, reduce라는 데이터 요리사의 주방을 탐험해볼까요?

---

🥪 reduce의 기본 레시피

문법

array.reduce((accumulator, currentValue, index, array) => {
  // 로직
}, initialValue);

 

reduce는 배열의 각 요소를 돌며 아래의 재료들을 받아요:

• accumulator: 요리사가 사용하는 그릇 같은 역할! 이전 단계에서의 결과를 담습니다.
• currentValue: 지금 처리 중인 재료
• index: 현재 재료의 위치(선택 사항)
• array: 요리하는 전체 배열(선택 사항)
• initialValue: 그릇에 처음 넣을 기본값

---

🍳 예제: 기본 사용법

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

// 합계를 계산해볼까요?
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 10

동작 과정:

1. 초기값(initialValue): 0 (빈 그릇)
2. 1단계: accumulator(0) + currentValue(1) = 1
3. 2단계: accumulator(1) + currentValue(2) = 3
4. 3단계: accumulator(3) + currentValue(3) = 6
5. 4단계: accumulator(6) + currentValue(4) = 10

 

👉 결과는 10! 숫자들이 맛있게 합쳐졌습니다. 🍝

---

🧑‍🍳 다양한 reduce 요리법

배열의 평균 구하기 🥗

const scores = [90, 80, 70, 100];

const average = scores.reduce((sum, score, _, array) => {
  return sum + score / array.length;
}, 0);

console.log(average); // 85

 

배열의 길이를 활용해 평균을 구할 수 있어요. 역시 요리사는 도구 활용이 중요하죠!

 

중첩 배열 펼치기 (Flattening) 🥞

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

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

console.log(flat); // [1, 2, 3, 4, 5, 6]

 

중첩 배열을 한 줄로 “펴”서 깔끔한 플레이팅을 완성했습니다.

 

객체로 그룹화하기 🍩

const fruits = [
  { type: "apple", quantity: 10 },
  { type: "banana", quantity: 5 },
  { type: "apple", quantity: 7 },
];

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

console.log(grouped); // { apple: 17, banana: 5 }

 

“사과는 사과끼리, 바나나는 바나나끼리!” 그룹화도 깔끔하게 가능!

 

가장 큰 값 찾기 🥩

const numbers = [5, 17, 2, 9];

const max = numbers.reduce((acc, curr) => {
  return acc > curr ? acc : curr;
});

console.log(max); // 17

 

reduce로 배열 중 가장 큰 값도 손쉽게 찾을 수 있죠. “최고의 요리는 최고의 재료에서!”

---

🎭 reduce의 흔한 실수와 주의점

1️⃣ 초기값을 잊지 마세요!

초기값을 생략하면 배열의 첫 번째 요소가 초기값으로 설정돼요. 이 때문에 예상치 못한 결과가 나올 수 있습니다.

const numbers = [];
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 안전
// 초기값 생략하면 에러 발생!

 

2️⃣ 배열이 빈 경우 주의

초기값이 없으면 빈 배열에서는 에러가 납니다. “요리 재료가 없으면 요리도 없다!”

---

🎉 reduce와 React의 만남

reduce는 React에서도 유용합니다. 특히 상태를 계산하거나 JSX를 동적으로 생성할 때 자주 쓰이죠.

JSX 리스트 생성 🏗️

const todos = [
  { id: 1, task: "React 공부하기" },
  { id: 2, task: "Redux 연습하기" },
];

const todoList = todos.reduce((acc, todo) => {
  return acc.concat(<li key={todo.id}>{todo.task}</li>);
}, []);

function App() {
  return <ul>{todoList}</ul>;
}

---

🏅 reduce, 알고 나면 정말 만능 도구!

• 데이터를 합치고,
• 그룹화하고,
• 원하는 형태로 변형하며,
• React에서도 알차게 활용할 수 있는 reduce

 

이제 reduce를 마스터했으니, 당신도 데이터 요리사가 될 준비가 됐군요!

 

🌷전설의 개발자가 되어봅시당!🌷