[JavaScript] forEach와 map의 차이

forEach()와 map() 메서드는 둘다 배열 전체를 탐색한다는 공통점이 있다. 둘의 명백한 차이는 아래와 같다.

let arr = [1, 2, 3];

let forEachArr = arr.forEach((d) => {
  return d * 2;
});

let mapArr = arr.map((d) => d * 2);

console.log(forEachArr); // undefined
console.log(mapArr); // [2, 4, 6]

위처럼 가장 큰 차이는 forEach()는 배열을 단순히 탐색하기만 하고, map()은 배열을 탐색하여 새로운 배열을 반환한다는 것이다. 몇 가지 차이와 함께 더 알아보자.

 

forEach() VS map()

1. 반환 값
   
   1. forEach()는 단순히 배열의 각 요소에 대해 action을 수행하는 것이 주목적이고 undefined를 반환한다. 반면에 map()은 새로운 배열을 반환한다.
2. 불변성
   1. map()은 새 배열을 생성하며 원래 배열은 변경하지 않는다. 반면에 forEach()는 콜백 함수 내에서 배열 요소를 수정하는 경우 원래 배열이 변경될 수도 있다.
3. 성능
   1. map()은 새 배열을 생성하기 때문에 forEach()에 비해 약간 느릴 수도 있다. 그러나 큰 차이가 없기 때문에 성능 때문에 forEach()를 사용한다는 것은 바람직하지 않다.
4. 연결성
   1. map()은 새 배열을 반환하므로 filter(), reduce() 같은 다른 배열 메서드를 연결할 수 있다. 반면에 forEach()는 undefined를 반환하므로 불가능하다.

 

아래는 forEach의 불변성에 관한 코드이다. 아래와 같이 사용하면 forEach는 원래 배열을 변경한다. 물론 map도 동일하게 작성하면 원래 배열이 변경되지만, 이는 map의 용도가 아니다.

let arr = [1, 2, 3];
arr.forEach((num, idx, curArr) => {
    curArr[idx] = num * 2;
})

console.log(arr); // [2, 4, 6]