[JavaScript] 배열 메서드 - map, filter, reduce

자바스크립트에서 데이터를 다룰 때 배열은 빠질 수 없는 개념이다. 특히 map, filter, reduce 같은 고차 함수들은 반복문 없이 깔끔한 코드 작성을 가능하게 만든다. 코드 가독성이 좋아지고, 불필요한 변수를 줄여 사이드 이펙트를 최소화할 수 있다는 점에서 유용하다. 하지만 처음에는 각 메서드의 차이와 용도를 정확히 이해하지 못해서 불필요하게 반복문을 섞어 쓰는 경우도 많다. 여기서는 배열을 다룰 때 자주 쓰이는 메서드들을 정리하고, 실제 코드에서 어떻게 활용하면 좋을지 살펴본다.

1. map - 배열 변형의 기본

map은 기존 배열을 가공하여 새로운 배열을 만들 때 유용하다. 기존 데이터를 변경하는 것이 아니라 변형된 새로운 배열을 반환한다는 점이 핵심이다.

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(num => num ** 2);

console.log(squared); // [1, 4, 9, 16, 25]

어떤 데이터를 일정한 형식으로 변환할 때도 유용하다.

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];

const usernames = users.map(user => user.name);
console.log(usernames); // ["Alice", "Bob", "Charlie"]

여기서 주의할 점은 map은 기존 배열을 변경하지 않는다는 것이다. map을 쓴 후 기존 배열이 변할 거라고 생각하고 실수하는 경우가 많다. 만약 원본 데이터를 변경하고 싶다면 map이 아니라 forEach 같은 메서드를 사용해야 한다.

2. filter - 원하는 데이터만 걸러내기

데이터에서 특정 조건을 만족하는 요소만 골라내야 할 때 filter를 사용한다. 새로운 배열을 반환하며, 조건을 만족하지 않는 요소는 제외된다.

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

console.log(evens); // [2, 4, 6]

데이터에서 특정한 속성을 기준으로 필터링할 때도 유용하다.

const products = [
  { name: "Laptop", price: 1500 },
  { name: "Phone", price: 800 },
  { name: "Tablet", price: 400 }
];

const expensiveProducts = products.filter(product => product.price > 1000);
console.log(expensiveProducts); // [{ name: "Laptop", price: 1500 }]

가끔 filter를 사용할 때 결과가 undefined가 나오는 경우가 있는데, 이는 조건문이 항상 false를 반환하기 때문이다. 초기에 필터링 조건을 잘못 설정하면 빈 배열이 나올 수 있다는 점을 고려해야 한다.

3. reduce - 배열을 하나의 값으로 축약하기

reduce는 배열을 단일 값으로 변환하는 데 사용된다. 총합, 평균, 개수 세기 등 다양한 연산에 활용할 수 있다.

총합 구하기

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

console.log(sum); // 15

배열을 객체로 변환하기

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" }
];

const userMap = users.reduce((acc, user) => {
  acc[user.id] = user.name;
  return acc;
}, {});

console.log(userMap); // { 1: "Alice", 2: "Bob", 3: "Charlie" }

reduce를 사용할 때 가장 헷갈리는 부분은 acc가 어떤 값을 유지하는지 명확하게 이해하는 것이다. 특히 초기값을 설정하는 부분이 중요한데, 이를 잘못 설정하면 undefined나 NaN 같은 이상한 값이 나올 수 있다.

마무리

배열 메서드를 잘 활용하면 코드의 가독성과 유지보수성이 크게 향상된다. 특히 map, filter, reduce를 조합하면 복잡한 데이터 처리도 깔끔하게 정리할 수 있다. 처음에는 익숙하지 않을 수 있지만, 하나하나 적용하면서 기존 for 루프와 비교해 보면 확실히 더 직관적이라는 걸 느낄 수 있다. 배열을 다룰 때 무조건 반복문을 먼저 떠올리기보다는, 이 메서드들로 해결할 수 있는지 먼저 고민해 보는 것이 좋다.