[ES6] forEach와 map의 차이점

Javascript의 Array 관련 메서드인 forEach와 map은 ES5부터 나왔다. 두 개의 메서드가 모두 배열 내의 원소를 탐색하는 것이기 때문에 프로젝트에스 forEach와 map을 자주 사용하였다. 하지만 언제 forEach를 사용하는 것이 좋고, 언제 map을 사용하는 것이 좋은지 구분지을 필요가 있었다. 따라서 forEach와 map의 차이점을 파악하고 각각의 메서드를 언제 사용하는 것이 좋은지 알아보려고 한다.

---

먼저 forEach와 map이 어떻게 동작하는지 알아보자.

 

forEach

forEach는 콜백 함수를 인자로 전달받아 배열 내의 각 원소에 대해 콜백 함수를 실행하도록 한다.

다음 코드에서 1부터 5까지의 숫자를 갖는 numbers라는 배열을 선언하였다. 이를 forEach를 통해 아래와 같이 순차적으로 탐색하여 각 숫자들을 출력할 수 있다. 또한, 두 번째 인자에 현재 탐색하는 원소의 인덱스를 전달하여 인덱스도 함께 출력할 수 있다.

let numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => console.log(number));
numbers.forEach((number, index) => console.log(number, index));

forEach는 배열 내의 원소에 대해 콜백 함수가 실행되며 새로운 값을 반환하지는 않으며 원본 배열을 훼손하지 않는다.

 

map

map은 배열 내의 각각의 원소들에 대해 주어진 함수를 실행하고 반환된 결과들을 모은 새로운 배열을 반환한다.

아래의 코드는 1부터 5까지의 숫자를 갖는 numbers라는 배열을 선언하였고 이에 대해 map을 실행하였다. map을 통해 각 원소에 대한 제곱을 실행하고 결과를 반환하여 새로운 배열인 newNumbers에 저장한다. 결과적으로 newNumbers에는 numbers의 각 숫자들을 제곱한 결과가 들어있다.

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map((number) => number ** 2);
console.log(newNumbers);

map도 배열 내의 원소에 대해 콜백 함수가 실행되고 새로운 값을 반환하여 새로운 배열을 생성한다. 하지만 원본 배열을 훼손하지는 않는다.

---

forEach와 map을 언제 사용할까?

forEach와 map은 배열 내의 원소들에 대해 콜백 함수가 실행된다. 하지만 forEach는 결과값을 반환하지 않지만 map은 결과값을 반환하여 새로운 배열을 생성한다. 따라서 탐색을 통해 새로운 값이 필요하다면 map을 사용하고, 단순히 탐색을 한다면 forEach를 사용하도록 한다.