[JavaScript] forEach VS map

 

Array.prototype.forEach()

배열의 요소를 하나씩 순회하며 콜백함수를 반복 호출해 실행하는 함수다.

항상 undefined를 리턴하며 원본 배열을 변형시키지 않는다. 

forEach는 순회하는 도중에 break할 수 없다. 만약 for loop 도중 멈춰야하는 일이 있을 땐 forEach를 쓸 수 없다.

return을 쓰면 현재 요소를 뛰어넘을 수는 있지만 forEach문을 멈추는 것은 할 수 없다.

const items = ["item1", "item2", "item3"];
const copyItems = [];

// for loop
for (let i = 0; i < items.length; i++){
	copyItems.push(items[i]);
}

// forEach
itmes.forEach((item) => {
	copyItems.push(item);
});

 

Array.prototype.map()

호출한 배열의 모든 요소를 순회하며 콜백 함수를 반복 호출하는 함수다. 

콜백 함수의 반환값들로 구성된 새로운 배열을 반환하며, 원본 배열을 변형시키지 않는다.

map 함수는 순회하는 도중에 break할 수 없으며 원본 배열의 요소와 일대일 mapping이 이루어지므로 원본 배열과 이후 만들어진 새로운 배열의 길이는 같다.

const array1 = [1, 4, 9, 16];

// map()
const map1 = array1.map((x) => x * 2);

console.log(map1); // [2, 8, 18, 32]

 

forEach VS map 결론

공통점

• 함수를 호출한 배열의 모든 요소를 순회하며 콜백 함수를 반복 호출한다.
• 순회 도중 break할 수 없다.

차이점

• forEach는 undefined를, map은 새롭게 만들어진 배열을 반환한다.

즉, forEach는 단순 반복을 위한 것이고, map은 맵핑을 통한 새로운 배열을 얻고자 할 때 사용한다.

 

잘 구분해서 쓰자 !

 

 

출처

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN

 

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

Array.prototype.map() - JavaScript | MDN