배열 고차 함수 (map, filter, reduce)
함수를 인자로 받는 고차 함수(Higher-Order Function)는 모던 자바스크립트의 꽃입니다. React에서 리스트를 렌더링하거나 데이터를 가공할 때 map과 filter는 필수불가결합니다.
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 }
];
// 1. map(): 배열의 각 요소를 변환하여 "새로운 배열" 생성 (가장 많이 씀!)
const names = users.map(user => user.name);
console.log("이름만 뽑은 배열:", names); // ["Alice", "Bob", "Charlie"]
// 2. filter(): 조건이 '참'인 요소만 걸러내어 "새로운 배열" 생성
const over30 = users.filter(user => user.age >= 30);
console.log("30세 이상:", over30); // Bob, Charlie 객체 배열
// 3. reduce(): 배열의 모든 요소를 하나의 값으로 누적 (예: 나이 총합)
// sum은 누적값, 0은 초기값
const totalAge = users.reduce((sum, user) => sum + user.age, 0);
console.log("나이 총합:", totalAge); // 90
// 4. find(): 조건에 맞는 "첫 번째 요소" 하나만 반환 (배열이 아님)
const bob = users.find(user => user.name === "Bob");
console.log("Bob의 나이:", bob.age); // 30
