[Javascript] forEach vs map (Array.prototype)

 

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

 

 

 

https://morioh.com/p/95a59d08f5e1

 

Q. Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?

 

 

A.

자바스크립트의 Array는 기본적으로 forEach와 map 등의 메서드를 프로토타입을 통해 제공합니다. 둘 다 Array안에 있는 Element들을 순회한다는 특징을 가지고 있지만, 둘은 결과물을 리턴하는 방식에서 차이를 보입니다.

 

 

Array.prototype.map

const arr = [1, 2, 3, 4, 5];
const mapArr = arr.map(elem => elem * 2);

console.log(mapArr);
// [2, 4, 6, 8, 10];

map은 기본적으로 기존의 배열을 넘겨받아 참조가 다른 완전히 새로운 배열을 반환합니다. 따라서 map안에 각각의 원소에 대해 어떻게 리턴될 것인지를 정의하는 callback function을 반드시 넘겨야 하며, 해당 callback이 사용할 this의 값을 명시적으로 넘겨주고 싶을 때는 두 번째 파라미터로 this를 넘길 수도 있습니다.

 

 

map은 참조가 다른 새로운 배열을 리턴하기 때문에 새로운 배열을 사용하지 않을 때에 이를 사용하는 것은 일종의 안티패턴(anti-pattern)입니다. 따라서 rxjs등에서 Observer Pattern 등을 통해 구독한 값을 즉시 가공하여 사용하는 등, 배열을 가공해서 새로운 배열을 사용해야 할 때 사용하도록 권장되는 메서드입니다.

 

 

Array.prototype.forEach

const arr = [1, 2, 3, 4, 5];

arr.forEach(elem => {
    console.log(elem);
});

// 1, 2, 3, 4, 5

forEach도 기본적으로는 map과 동일하게 배열의 원소를 순회합니다. 하지만, 다른 점이 있다면 그냥 순회하고 '끝'이라는 점입니다.  forEach의 실행 결과는 기본적으로 undefined입니다. callback function을 forEach에 파라미터로 넘겨주고 나면, 해당 callback function은 element, index(optional), array(optional)을 파라미터로 받아 원소마다 한 번씩 실행됩니다. 따라서 배열을 가공하는 것이 아닌, 정말로 배열을 순회해야 할 때 이를 사용합니다.

 

 

 

 

forEach가 갖는 중요한 특성 중의 하나는 synchronous 한 성질을 기대한다는 것입니다. 따라서 다음과 같은 비동기 콜백 함수를 파라미터로 넘겨주었을 때, forEach함수는 각각의 await를 기다리지 않고 이벤트 루프에 던진 뒤에 바로 다음 코드를 실행합니다. 

 

 

 

 

Reference

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map()

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/foreach

Array.prototype.forEach()