JavaScript 배열 고차 함수

🌱 자바스크립트 심화: 배열 고차 함수 (map, filter, reduce)

자바스크립트의 배열 고차 함수는 데이터를 효율적으로 가공하고 조작할 수 있게 도와주는 매우 강력한 도구입니다. 이번 강좌에서는 map, filter, reduce 세 가지 함수의 개념과 사용 예제를 알아보겠습니다.

🧭 map(): 배열의 각 요소를 변형

map() 함수는 배열의 각 요소를 순회하며, 새로운 값으로 변환된 새 배열을 반환합니다.

const numbers = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

💡 특징: 원본 배열을 변경하지 않고, 새 배열을 반환합니다.

🧼 filter(): 조건에 맞는 요소만 추출

filter() 함수는 조건에 참이 되는 요소들만 걸러낸 새 배열을 반환합니다.

const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4, 6]

💡 특징: 조건에 맞지 않는 값은 자동으로 제외됩니다.

🧮 reduce(): 하나의 값으로 누적

reduce() 함수는 배열의 모든 요소를 순회하며 하나의 누적 값으로 줄여줍니다.

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

💡 acc: 누적값, cur: 현재값, 초기값은 두 번째 인자로 설정 (여기선 0)

📌 활용 예시: 사용자 객체의 평균 나이 계산, 장바구니 총 합산 등 다양한 로직에 사용됩니다.

🧪 실전 예제: 세 함수 조합하기

const users = [
  { name: "Tom", age: 25 },
  { name: "Jane", age: 30 },
  { name: "John", age: 35 },
  { name: "Lucy", age: 28 }
];

// 30세 미만 유저의 이름 대문자로 추출
const youngUserNames = users
  .filter(user => user.age < 30)
  .map(user => user.name.toUpperCase());

console.log(youngUserNames); // ["TOM", "JANE", "LUCY"]

✅ 정리

• map() - 배열 요소를 변형
• filter() - 배열 요소를 선별
• reduce() - 배열을 하나의 값으로 축소

이 세 가지 고차 함수는 자바스크립트에서 데이터를 효율적으로 다루는 핵심 도구입니다. 실제 프로젝트에서도 자주 사용되니 꼭 익혀두세요!