자바스크립트 - map와 forEach의 차이점

 

Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 

 

시도해보기

 

 

Array.prototype.forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

 

 

시도해보기

 

 

 

map 메서드와 forEach 메서드의 차이점

큰 차이점은 return 값을 반환하냐 안 하냐가 있습니다. 

 

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

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

우선 map 같은 경우는 콜백 함수의 실행 결과를 return을 그 결과들을 배열 형태로 변수에 저장합니다. 

 

array1.forEach(element => console.log(element)); // undefined

반면에 forEach는 반복문의 실행 결과를 return을 하지 않고 그저 함수를 실행만 합니다. 그래서 console.log로 출력을 해봐도 undefined만 나올 뿐입니다. 

 

 

 

reference:

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

Array.prototype.forEach() - JavaScript | MDN