forEach()와 map()의 차이점

 

forEach( )와 map( )은 어떻게 다를까?

우선 둘다 배열을 이용하고 배열의 값을 조작해서 원하는 결과를 출력하는 점에서는 같습니다. 결론 부터 이야기하면 forEach( )는 기존의 배열을 조작해서 결과를 나오게하는 반면, map ( )은 기존 배열은 그대로 있고 조작된 결과에 맞춰서 새로운 배열을 새로 반환 합니다!
그럼 어떻게 다른지 살펴 봅시다.

forEach( )

//forEach

const arr = [1,2,3,4,5];

let a = arr.forEach( el => {
    console.log(el+2); //3,4,5,6,7
    return(el+2); 
})
console.log(a); //undefined  

forEach는 리턴값을 받지 못해요! 저렇게 undefined가 출력됩니다. 하지만 map으로 똑같이 해보면 결과는 다릅니다.

map( )

//map
const arr = [1,2,3,4,5];

let a = arr.map( el => {
    console.log(el+2); //3,4,5,6,7
    return (el+2); 
})
console.log(a);  //[3,4,5,6,7] 

이 경우에는 [3,4,5,6,7]이 출력되는 것을 볼 수 있죠.
map( )은 리턴값을 출력할 수 있습니다.

기존의 배열은 그대로 있고 새로운 배열의 값을 배출하는거죠. 원본을 해치지 않는 점에서 map이 더 좋다고 할 수도 있으려나요?

실행하는데에 소스를 forEach보다 많이 잡아먹어서 규모가 큰 식의 경우 비효율적인게 아니냐? 라는 의견도 있지만 실행환경에 따라서 다르기 때문에 그에 맞는 문법을 잘 활용하시면 됩니다.

검색해보니 서로 뭐가 더 좋다는 의견이 많아서 저는 그냥 취향차이라고 생각하겠습니다.

 

정리

1. forEach ()로 할 수있는 일은 map ()으로 할 수 있으며, 그 반대도 가능하다.

2. map ()은 메모리를 할당하고 반환 값을 저장한다.
forEach ()는 반환 값을 버리고 항상 정의되지 않은 값을 반환한다.

3. forEach ()는 콜백 함수가 현재 배열을 변경하도록합니다. map ()은 대신 ​​새 배열을 반환한다.

---

forEach()
Array 요소를 제공된 함수로 한 번 실행
아무 값도 반환하지 않는다
기존 배열 변경 가능

---

map()
모든 Array 요소가 제공된 함수로 호출될 때 새로운 array를 생성
기존의 배열을 가공하여 새로운 배열을 생성할 때 사용
기존 배열은 값이 바뀌지 않고 유지

---