[VanillaJS] map과 forEach

JS에서 array의 각 원소에 대해 같은 작업을 반복하고 싶을 때, for문 대신에 

Array.prototype.map()이나 Array.prototype.forEach()를 사용할 수 있다.

 

두 함수의 차이는 무엇일까? MDN 공식문서를 참고해보자.

 

map() : 배열 내의 모든 원소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환

* 기존 배열의 원소들로 작업을 완료한 뒤 해당 결과물들을 모아 새로운 배열을 return해준다는 것을 알 수 있다.

* 따라서 map의 용도를 제대로 살리려면 callback 함수 내에 return 구문이 있어야 한다. 

 

forEach() : 주어진 함수를 배열 요소 각각에 대해 실행

* forEach()는 배열을 변형하지 않는다. 그러나 callback에서 변형할 수는 있다.

 

// map 예시
const array1 = ['a', 'b', 'c'];
array1.map(element => return element+"!");
// array1 = ["a!", "b!", "c!"]

// forEach 예시
const array2 = ['a', 'b', 'c'];
array2.forEach((element) => console.log(element));

// forEach에서 배열을 변형하는 예시 
const array3 = ['a', 'b', 'c'];
array3.forEach((element, idx) => array1[i] = element+"!");
// array3 = ["a!", "b!", "c!"]

 

배열을 순회 하려면 forEach(), 

배열을 순회 후 새로운 배열을 얻고 싶다면 map()을 사용하는 것이 좋다. 

 

참고자료

MDN 공식 문서

https://m.blog.naver.com/wideeyed/221877912230

https://frontdev.tistory.com/entry/JS-Map-vs-ForEach