map, filter, reduce의 차이와 사용 기준을 설명해주세요.

map은 각 요소를 변환해 새 배열을 만들고, filter는 조건에 맞는 요소만 남기며, reduce는 배열을 하나의 누적 결과로 합칩니다. 목적에 맞게 쓰면 코드 의도가 선명해집니다.

핵심 개념

핵심 기준은 배열 변환, 필터링, 누적의 차이입니다. 이 개념은 단순한 용어가 아니라, 실제 코드나 시스템에서 반복적으로 생기는 문제를 다루기 위해 등장했습니다.

JavaScript는 실행 문맥, 비동기 흐름, 참조 관계가 코드 동작에 직접 영향을 주는 언어입니다. 그래서 문법을 외우는 것보다 값이 언제 결정되고 어떤 순서로 실행되는지 이해하는 것이 중요합니다.

동작 흐름

1. 먼저 어떤 문제가 있는지 확인합니다.
2. 이 개념이 그 문제를 어떤 기준으로 나누거나 해결하는지 봅니다.
3. 실제 코드에서는 입력, 상태, 실행 순서, 비용이 어떻게 바뀌는지 확인합니다.
4. 마지막으로 한계와 부작용을 함께 점검합니다.

실제 예시

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

const doubled = values.map((n) => n * 2);
const even = values.filter((n) => n % 2 === 0);
const sum = values.reduce((acc, n) => acc + n, 0);

배열 메서드는 의도를 드러내는 방식으로 선택하면 좋습니다. 변환은 map, 필터링은 filter, 누적은 reduce가 자연스럽습니다.

실무에서 주의할 점

• 암묵적 변환이나 실행 문맥에 기대면 작은 리팩터링에도 동작이 달라질 수 있습니다.
• 비동기 코드에서는 실행 순서와 에러 전파 경로를 반드시 확인해야 합니다.
• 브라우저 이벤트나 타이머를 사용했다면 정리(cleanup) 시점을 놓치지 않는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

JS, Array, map, filter, reduce

정리

한 줄로 정리하면, map은 각 요소를 변환해 새 배열을 만들고, filter는 조건에 맞는 요소만 남기며, reduce는 배열을 하나의 누적 결과로 합칩니다. 목적에 맞게 쓰면 코드 의도가 선명해집니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.

map, filter, reduce의 역할

세 메서드는 모두 배열을 순회하지만 의도가 다릅니다. map은 1:1 변환, filter는 일부 선택, reduce는 하나의 누적 결과를 만드는 데 사용합니다.

const products = [
  { name: 'A', price: 1000, inStock: true },
  { name: 'B', price: 2000, inStock: false },
];

const names = products.map((p) => p.name); // ['A', 'B']
const available = products.filter((p) => p.inStock); // A만
const total = products.reduce((sum, p) => sum + p.price, 0); // 3000

선택 기준

• 배열 길이가 그대로면 map
• 조건에 맞는 요소만 남기면 filter
• 숫자, 객체, Map 등 하나의 결과로 접으면 reduce

reduce 남용 주의

// 읽기 어려운 reduce보다
const activeUsers = users.filter((u) => u.active).map((u) => u.name);

// 목적이 복잡하면 명시적인 for문이 더 나을 수 있음
const grouped = {};
for (const user of users) {
  grouped[user.team] ??= [];
  grouped[user.team].push(user);
}

함수형 메서드는 의도가 명확할 때 강력하지만, 팀원이 읽기 어렵다면 단순한 반복문이 더 좋은 선택입니다.