map, forEach, filter

좋은 질문이에요! map, forEach, filter는 자바스크립트에서 매우 자주 쓰이는 배열 메서드인데, 각각의 목적과 리턴값이 다르기 때문에 용도에 따라 적절히 선택해야 합니다.

---

🔍 map, forEach, filter 비교 요약

메서드	목적	리턴값	주로 쓰는 상황
map	배열의 각 요소를 변환	새로운 배열 반환	렌더링용 컴포넌트 목록 만들기, 데이터 변환
forEach	배열의 각 요소에 대해 단순 반복 실행	없음 (undefined)	로그 출력, 외부 함수 호출 등 side effect 용도
filter	조건을 만족하는 요소만 걸러내기	조건을 만족하는 새 배열 반환	특정 조건에 맞는 요소 추출

---

✅ 1. map – 변환용

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
// [2, 4, 6]

📌 포인트

• 배열 요소 각각을 변형해서 새로운 배열을 반환
• React에서 JSX 컴포넌트를 반복 렌더링할 때 자주 사용

---

✅ 2. forEach – 반복용

const numbers = [1, 2, 3];
numbers.forEach(n => {
  console.log(n * 2);
});
// 콘솔 출력: 2, 4, 6

📌 포인트

• 반환값은 없음 (undefined)
• 배열을 변형하는 것이 아닌, 단순 실행이 목적
• 데이터를 출력하거나 외부에 영향을 줄 때 (e.g. 서버 전송)

---

✅ 3. filter – 조건 필터링

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

📌 포인트

• 특정 조건을 만족하는 요소만 걸러낸 새 배열을 반환
• "남기고 싶은 것만 남긴다"는 개념

---

💡 직관적 예시로 기억하기!

상황	사용할 메서드
배열의 값을 변경해서 새 배열 만들기	map
단순히 반복해서 무언가 실행만 할 때	forEach
특정 조건을 만족하는 것만 추출	filter

---

🎯 React에서의 실전 예시

map 예시 – 컴포넌트 렌더링

comments.map((item, index) => (
  <Comment key={index} name={item.name} comment={item.comment} />
));

filter 예시 – 특정 조건만 렌더링

comments
  .filter(comment => comment.name.includes("홍"))
  .map((item, index) => (
    <Comment key={index} name={item.name} comment={item.comment} />
));

---

후속 추천 질문

• [1] reduce 함수는 위 메서드들과 어떻게 다르고 언제 사용하나요?
• [2] map과 filter를 함께 사용하는 실전 예제를 더 보여줄 수 있나요?
• [3] 배열 메서드를 사용할 때 성능을 고려해야 하는 경우는 언제인가요?

번호를 입력하거나, 계속해서 대화를 이어가시면 됩니다.