map vs forEach

ljjunh·2024년 11월 20일

clean-code-javascript

목록 보기

27/38

배열 메서드를 사용하다 보면 가장 흔히 발생하는 실수 중 하나가 map과 forEach를 구분하지 못하거나, 한 가지만 고집하여 사용하는 경우다. 이 두 메서드의 차이점과 올바른 사용법을 알아보자

1. 기본 동작 비교 🔍

const prices = ['1000', '2000', '3000'];

// forEach 사용
const newPricesForEach = prices.forEach((price) => price + '원');
// map 사용
const newPricesMap = prices.map((price) => price + '원');

console.log(newPricesForEach); // undefined
console.log(newPricesMap); // ['1000원', '2000원', '3000원'];

주요 차이점

반환값
map: 새로운 배열 반환
forEach: undefined를 반환 (반환값 없음)
목적
map: 배열의 각 요소를 변환하여 새로운 배열 생성
forEach: 단순히 배열을 순회하면서 작업 수행

2. 혼동되는 케이스 🤔

const prices = ['1000', '2000', '3000'];

// forEach로 출력
prices.forEach((price) => console.log(price + '원'));

// map으로 출력
prices.map((price) => console.log(price + '원'));

둘 다 같은 결과를 보여주지만, map을 이런 식으로 사용하는 것은 적절하지 않다.
왜? 🧐

명세의 의도
map: 새로운 배열을 만들기 위한 메서드
forEach: 각 요소에 대해 함수를 실행하기 위한 메서드
성능
map은 새로운 배열을 만들기 때문에 메모리를 더 사용
단순 순회만 필요한 경우 forEach가 더 효율적

3. 올바른 사용법 👍

3.1 map 사용이 좋은 경우

// 배열의 모든 요소를 변환할 때
const prices = ['1000', '2000', '3000'];
const pricesWithWon = prices.map(price => price + '원');

3.2 forEach 사용이 좋은 경우

// 단순히 출력하거나 다른 작업을 수행할 때
prices.forEach(price => console.log(price));

// DOM 조작
elements.forEach(el => el.classList.add('active'));

// 외부 변수 수정
let total = 0;
prices.forEach(price => total += Number(price));