map() vs forEach() 언제 사용해야할까?

배열을 순회할 때 자주 쓰는 두 가지 메서드 map() 과 forEach() 는 겉보기엔 비슷하지만, 선택에 따라 코드의 동작 방식이 크게 달라집니다. 여기서는 두 메서드의 차이를 살펴보고, 어떤 상황에서 어떤 도구를 써야 하는지 정리합니다.

---

map() 이란?

map() 은 원본 배열을 변경하지 않고 각 요소에 함수를 적용해 새로운 배열을 반환합니다.

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

데이터를 변형하면서 새 배열이 필요할 때 가장 적합합니다.

---

forEach() 란?

forEach() 는 배열의 각 요소에 함수를 실행하지만 반환값이 undefined 입니다. 따라서 외부 상태를 변경하거나 콘솔 출력, API호출 같은 상황에서 사용합니다. 

let number = [1, 2, 3, 4];
let sum = 0;
numbers.forEach(num => sum += num);
console.log(sum); // 10

---

map() 을 선택하야 하는 경우

• 새 배열 생성: 값 목록, 객체 배열 등 새로운 컬렉션이 필요할 때

const names = products.map(p => p.name);

• 부작용 피하기: 원본 배열을 건드리지 않는 불변성 유지

const doubled = nums.map(n => n * 2);

• 매서드 체이닝: map() 이 배열을 반환하므로 이어서 filter(), reduce() 등을 바로 연결 가능

const total = nums.map(n => n * 2).filter(n => n > 5).reduce((a,b) => a + b, 0);

주의: map() 결과를 사용하지 않을 거라면 map() 대신 forEach() 를 쓰는 것이 의미와 성능 면에서 올바릅니다. 

---

forEach() 를 선택해야 하는 경우

• 변수를 업데이트 하는 경우
• API 호출 / DOM 조작 처럼 외부에 대한 필요한 로직을 실행할 때
• 반환값이 필요 없을 때

---

마무리: "새 배열 vs 부작용"만 기억하자

데이터를 '변환'해 새 배열이 필요하면 map()
값을 리턴하지 않고 '행동'만 할 거면 forEach()

이 간단한 규칙 하나면, 앞으로 배열 순회 매서드 선택에서 더 이상 헤메지 않을 겁니다.

올바른 도구를 고르면 코드 품질도, 협업 효율도 자연스럽게 올라가니깐요.