JS Object에서 .forEach 루프와 .map() 루프 사이의 주요 차이점

forEach

배열의 요소를 반복합니다.(공통점)

각 요소에 대해 콜백을 실행하며 값을 반환하지 않습니다.(차이점)

const a = [1, 2, 3];
const doubled = a.forEach((num, index) => {
	return num*=2;
})
console.log(doubled)// doubled = undefined

map

배열의 요소를 반복합니다.(공통점)

각 요소에서 함수를 호출하여 결과로 새 배열을 작성하여 각 요소를 새 요소에 매핑합니다.(차이점)

const b = [1, 2, 3];
const doubledmap = b.map((num, index) => {
	return num*=2;
})
console.log(doubledmap)// doubledmap = [2,4,6];

.forEach와 .map()의 가장 큰 차이점은 .map()이 새로운 배열을 반환한다는 것입니다.

반복의 결과를 조작한 새로운 배열이 필요하다면 .map(),

단순히 배열을 반복할 필요가 있다면, forEach가 좋은 선택입니다.

 

* 성능적인 측면에서 forEach가 더 우월하게 보였다.

* 하지만 실제로 결과 배열이 필요한 경우에는 오히려 map의 성능이 2배정도 좋았다.

** 값 할당 X => https://jsben.ch/459pe

** 값 할당 O => https://jsben.ch/bmnlP

JSBEN.CH Performance Benchmarking Playground for JavaScript

---

여담

반복문의 성능 차이

for, map, while, forEach

순수 for문이 가장 빠른 성능을 보였다.

 

* 값을 할당하지 않았을 때(결과 배열이 필요없을 때)

* for에서 반복길이를 먼저 설정하는거나 내부에서 length를 계속해서 참조하는거에서는 큰 차이가 없는 정도

* forEach나 map은 성능이 매우 느린편에 속했고, map이 가장 느렸다.

 

https://jsben.ch/Wb00j

JSBEN.CH Performance Benchmarking Playground for JavaScript

* 값을 할당 했을 때(결과 배열이 필요할 때)

* forEach가 가장 느린 성능을 보였고, 그 외에 for, while, map은 모두 비슷한 성능을 보였다.

* 새로운 배열이 필요한 경우에는 map, 그 외에는 순수for문을 사용하는 것이 좋아보인다.

https://jsben.ch/LZjzB

JSBEN.CH Performance Benchmarking Playground for JavaScript

 

 

(forEach를 쓰는 이유는 뭘까...)