[Javascript] Array.prototype.forEach vs Array.prototype.Map

서론

오늘은 배열을 순회하는 내장 메서드인 forEach와 Map의 차이점을 알아보도록 하겠습니다.

본론

forEach

먼저 forEach에 대해서 살펴보겠습니다.

const arr = [1, 2, 3, 4, 5];
arr.forEach((i) => console.log(i+1));
console.log(arr);

배열을 순회하며, 각 원소에 1을 더하는 간단한 함수를 forEach 메서드의 콜백함수로 등록해줍니다. 아래와 같이 출력되는 것을 볼 수 있습니다.

2
3
4
5
6
[1, 2, 3, 4, 5]

forEach 메서드를 사용하면 원본 배열에 영향을 주지 않으며, 반환 값도 없습니다.

map

이번엔 map 메서드를 살펴보겠습니다. 동일한 예제를 사용하여 비교해보겠습니다.

const arr2 = [1, 2, 3, 4, 5];
console.log(arr2.map((i) => i+1));
console.log(arr2);

forEach와 마찬가지로, 배열을 순회하며 함수를 실행시킨다는 점은 동일합니다. 단, map 함수는 실행된 결괏값으로 새로운 배열을 생성하여 반환합니다. 원본배열에는 영향을 주지 않지만, 그 과정에서 메모리가 추가로 사용되죠.

[2, 3, 4, 5, 6]
[1, 2, 3, 4, 5]

결론

---

둘 다 같은 일을 할 수 있으나, forEach가 단순히 배열을 순회하면서 함수를 실행할 것이라면 forEach가 더 낫습니다. 왜냐면 Map은 배열을 새로운 메모리 할당하여 반환하기 때문에, 프로그램 곳곳에 쓰이면 조금씩 메모리 사용량이 증가하게 되기 때문입니다.