[JavaScript] ES5 메소드인 map()과 forEach()의 차이점은?

최근 인프런 강의 중 하나인 '__따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기' 를 연습하고 있다.

그러던 와중 map()과 forEach()이 자주 등장하는데 눈으로 보기엔 기능이 거의 비슷한데

어떤 상황에서 어떤걸 써야 더 맞는건지? 반대로 써도 되는지?

왜 굳이 비슷한 기능이 두개가 있는가? 에 대해서 궁금해지기 시작했다.

그래서 알아봤고, 정리를 해야겠다고 생각했다.

---------------------------------------

 

간략 설명하자면, forEach()과 map()에 가장 큰 차이점은 리턴값의 유무인 것 같다.

map()은 리턴값이 있으며 forEach()은 리턴값이 존재하지 않는다.

 

가볍게 소스코드를 한번 보면서 위에 간략 설명을 풀어서 정리를 해보겠다.

아래 코드는 a배열의 값을 각각 *2를 하여 새로 저장하는 코드이다.

 

map() 메소드를 이용한 코드

----------

consta= [1,2,3,4,5];
const b = a.map(item=>{returnitem*2});
console.log(b); // [2, 4, 6, 8, 10]

 

forEach() 메소드를 이용한 코드

----------

consta= [1,2,3,4,5];
const b = [];
a.forEach(item => {b.push(item*2)});
console.log(b); // [2, 4, 6, 8, 10]

 

forEach() 메소드를 이용한 코드2

----------

const a = [1, 2, 3, 4, 5];
const b = a.forEach(item => {return item*2});
console.log(b); // undefined

forEach() 메소드를 이용한 코드3

---------

const a = [1, 2, 3, 4, 5];
a.forEach(item => {console.log(a*2)}); // 2, 4, 6, 8, 10

 

이렇게 보면 결과는 같지만, 사용하는 방식이 다르다는 걸 알수가 있다.

froEach같은 경우는 push를 활용하여 넣는 반면 map은 b라는 변수에 직접 return값을 저장하는 방식이다.

이걸로 보았을 때 둘은 배열을 순환하면서 하나하나의 값들을 활용한다는 공통점을 가지고 있지만

리턴값이 있냐 없냐라는 큰 차이점이 존재한다.

 

MDN에서는

forEach는 return값이 undefined이고, map은 콜백함수의 결과 값들로 구성된 새로운 배열을 return한다고 한다.

 

가장 중요하다고 생각하는 이걸 언제 써야할까?

- 기존 배열을 새롭게 수정하고, 수정된 배열을 리턴을 받아 저장을 할 때에는 map()

- 기존 배열을 데이터베이스에 저장을 하거나 수정된 값을 리턴받을 필요가 없을 때에는 forEach()

 

찾아보다보니 map()이 forEach()보다 성능이 좋다는 글을 2개 정도 본 것 같다.

하지만 펙트체크가 정확히 된건 아니기에.. 상황에 맞게 잘 활용하면 될 것 같다.

----------------------------------

아래 MDN글을 한번 읽어보는 것도 추천한다.

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

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