자바스크립트 실무 유틸 함수 시리즈 12 - 배열 고차 함수(map, filter, reduce)

이번 12편에서는 자바스크립트의 대표적인 고차 함수인 map, filter, reduce를 실무에서 효과적으로 활용할 수 있는 고급 유틸 함수 패턴으로 정리합니다. 단순한 예제를 넘어서 실질적인 데이터 가공과 응용 중심으로 구성했습니다.

---

✅ 1. map 활용 심화

📌 배열 객체의 속성 가공

const users = [
  { name: 'Alice', age: 28 },
  { name: 'Bob', age: 34 }
];

const names = users.map(user => user.name);
// 결과: ["Alice", "Bob"]

📌 실무 예시

• 데이터 API 응답에서 특정 필드만 추출
• UI 렌더링용 데이터 포맷 변경

---

✅ 2. filter 활용 심화

📌 조건에 맞는 데이터 필터링

const products = [
  { name: 'A', price: 100 },
  { name: 'B', price: 0 }
];

const available = products.filter(p => p.price > 0);
// 결과: [{ name: 'A', price: 100 }]

📌 실무 예시

• 유효한 데이터만 남기기
• 특정 권한 이상인 사용자 필터링

---

✅ 3. reduce 활용 심화

📌 총합 계산

const prices = [100, 200, 300];
const total = prices.reduce((sum, p) => sum + p, 0);
// 결과: 600

📌 배열 → 객체 변환

const entries = [ ['a', 1], ['b', 2] ];
const obj = entries.reduce((acc, [key, value]) => {
  acc[key] = value;
  return acc;
}, {});
// 결과: { a: 1, b: 2 }

📌 실무 예시

• 금액 합계, 평균 계산
• 배열 데이터를 키-값 형태로 재구성

---

✅ 4. 고차 함수 조합 예제

📌 filter + map + reduce 조합

const orders = [
  { price: 100, status: 'done' },
  { price: 150, status: 'pending' },
  { price: 200, status: 'done' }
];

const doneTotal = orders
  .filter(o => o.status === 'done')
  .map(o => o.price)
  .reduce((sum, price) => sum + price, 0);
// 결과: 300

📌 실무 예시

• 조건부 집계 처리
• 화면 표시용 요약 데이터 생성

---

✅ 결론

map, filter, reduce는 자바스크립트에서 배열 데이터를 처리하는 가장 기본이자 강력한 도구입니다. 이번 시리즈에서는 실무에서 자주 쓰이는 형태와 조합 패턴들을 통해 실전 활용 능력을 높이는 데 초점을 맞췄습니다.