[JS] map() vs forEach() 차이점 완벽 정리! 언제 어떤 걸 써야 할까?

 

안녕하세요, 오늘은 JavaScript에서 배열을 다룰 때 자주 사용하는 메서드인 map()과 forEach()의 차이점에 대해 정리해보겠습니다.

두 함수 모두 배열의 각 요소를 반복하면서 작업을 수행할 수 있게 해주지만, 사용 목적과 결과는 분명히 다릅니다.
이 글을 통해 map()과 forEach()의 차이를 명확히 이해하고, 상황에 맞는 적절한 선택을 할 수 있게 도와드릴게요!

---

1. 기본 개념

◇ forEach()

• 배열의 각 요소에 대해 반복 작업 수행
• 반환값이 없음(undefined)
• 단순히 사이드 이펙트(side effect, 출력, 저장 등)를 줄 때 사용

const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2)); // 2, 4, 6 출력

◇ map()

• 배열의 각 요소를 변형하고 새로운 배열 반환
• 반환값이 반드시 있음
• 데이터를 변환하거나 가공할 때 유용

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

---

2. 주요 차이점 요약

구분	forEach()	map()
목적	반복하며 작업 수행	반복하며 새 배열 반환
반환값	없음 (undefined)	새 배열 반환
체이닝	불가	가능 (ex. map().filter())
사용 시점	출력, 저장, 외부 상태 변경	데이터 변환, 가공
성능	거의 동일 (용도 차이)	거의 동일 (용도 차이)

 

---

3. 사용 예제 비교

예제 1: 배열 요소 출력

const arr = [10, 20, 30];

// forEach
arr.forEach((v) => console.log(v));

// map
arr.map((v) => console.log(v)); // 가능은 하지만 의미 없음

→ 단순 출력엔 forEach() 사용이 적절합니다.

---

예제 2: 새 배열 생성

const arr = [1, 2, 3];

// map
const result = arr.map(v => v * 2); 
console.log(result); // [2, 4, 6]

// forEach
const result2 = [];
arr.forEach(v => result2.push(v * 2));
console.log(result2); // [2, 4, 6]

→ 같은 결과지만, map()은 더 간결하고 함수형 코드에 적합합니다.

---

4. 언제 무엇을 사용해야 할까?

상황추천 메서드

단순 반복, 출력, 외부 상태 변경	forEach()
데이터 가공, 변환, 새 배열 반환	map()
체이닝(map → filter → reduce 등)이 필요한 경우	map()

 

---

! 주의할 점

• map()은 반드시 반환값을 명시해야 합니다. 그렇지 않으면 [undefined, undefined, ...] 배열이 만들어질 수 있어요.
• forEach()는 return해도 무시되므로, 중간에 break처럼 빠질 수는 없습니다.

---

마무리 요약

// map: 새로운 배열을 만들어 반환 (원본 불변)
const newArray = originalArray.map(callback);

// forEach: 반복만 수행, 반환 없음 (원본은 그대로)
originalArray.forEach(callback);

map()과 forEach()는 모두 배열 순회에 유용하지만, 의도가 다른 도구입니다.
용도에 맞게 정확히 선택하는 것이 코드를 더 명확하고 유지보수하기 쉽게 만들어줍니다.

 

 

궁금하신게 있으시면 댓글 달아주세요.
이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.