JavaScript에서 forEach와 map의 차이

JavaScript는 다양한 배열 메소드를 제공하여 개발자가 데이터 컬렉션을 효율적으로 처리할 수 있도록 합니다.

그중에서도 forEach와 map은 배열을 다룰 때 자주 사용되는 두 메소드입니다.

이 두 메소드는 유사해 보일 수 있지만, 사용 목적과 반환 값에서 중요한 차이점을 가지고 있습니다.

본 글에서는 forEach와 map의 기본적인 사용법, 차이점, 그리고 각각의 메소드가 적합한 사용 사례에 대해 상세하게 설명합니다.

forEach 메소드

forEach 메소드는 배열의 각 요소에 대해 주어진 함수를 한 번씩 실행합니다.

이 메소드는 배열을 순회하며 각 요소에 대해 특정 작업을 수행할 때 사용됩니다.

중요한 점은 forEach가 어떤 값도 반환하지 않는다는 것입니다(undefined를 반환).

주로 배열의 각 요소에 대해 부수 효과(side effects)를 발생시키는 데 사용됩니다.

 

forEach 사용 예시

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(number => console.log(number * 2));
// 콘솔에는 2, 4, 6, 8, 10이 출력됩니다.

 

이 예에서 forEach는 각 숫자에 2를 곱한 값을 콘솔에 출력하는 데 사용되었습니다.

하지만 배열을 수정하거나 새 배열을 생성하지는 않습니다.

map 메소드

반면, map 메소드는 배열의 각 요소에 대해 주어진 함수를 호출한 결과로 새 배열을 생성하여 반환합니다.

map은 기존 배열을 변형하는 데 사용되며, 원본 배열은 변경되지 않습니다. 각 요소를 새 값으로 변환하여 새 배열을 구성하는 데 이상적입니다.

map 사용 예시

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled);
// [2, 4, 6, 8, 10]이 출력됩니다.

 

이 예에서 map은 각 숫자를 두 배로 만든 새 배열을 생성합니다.

원본 numbers 배열은 그대로 유지됩니다.

forEach와 map의 주요 차이점

• 반환 값: forEach는 undefined를 반환하며, map은 새 배열을 반환합니다.
• 사용 목적: forEach는 배열의 각 요소에 대해 부수 효과를 발생시키는 데 사용됩니다. 반면, map은 배열의 각 요소를 변환하여 새 배열을 생성하는 데 사용됩니다.
• 부수 효과: forEach는 외부 상태를 변경할 수 있지만, map은 순수 함수를 사용하여 새 배열을 생성하는 데 초점을 맞춥니다.