forEach() vs map() 언제 무엇을 써야할까?

우선 MDN을 보고 원리를 이해하면 베스트!!

 

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

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

 

시간 없어도 나중에 꼭 찾아보고!!

 

간단하게 보자면!

 

forEach()

주어진 함수를 배열 요소 각각에 대해 실행!

 

map()

주어진 함수를 배열 요소 각각에 대해 실행하고 그 결과를 모아 새로운 배열을 반환!

 

 

정의는 이래!

그럼 똑같이 배열 요소 전부를 실행하는건데 차이점이 뭘까?!

 

가장 큰 차이점은 새 배열을 리턴한다는거야!

그게 무슨 말이냐..

예제를 보자!

const animals = ["lion", "tiger"];

animals.forEach(animal => {
  console.log(animal);
})

// result : lion, tiger

forEach()는 보이는 것처럼 배열의 각 요소들을 출력해!

 

map()도 고고!

const animals = ["lion", "tiger"];

animals.map(animal => {
  console.log(animal)
});

console.log(rr);

// result: lion, tiger
// [undefined, undefined]

map()도 forEach()와 같이 배열의 각 요소들을 출력해!

 

차이점은 forEach()와 다르게 실행결과를 모아서 새 배열을 리턴한다는 거야!

아래의 console.log(rr);은 별도의 return이 없기 때문에 반복한 개수만큼의 undefined가 잡히는거지!

 

따라서 map()의 용도를 제대로 살리려면 return이 있어야 해!

return이 포함되는 예제도 보자고!!

const animals =["lion", "tiger"];
rr = animals.map(animal => {
  console.log(animal);
  return "mammal " + animal
});
console.log(rr);

// result: lion, tiger, ["mammal lion", "mammal tiger"]

return이 들어가니까 배열 각 요소마다 callback을 실행하고 새로운 배열을 리턴했지?

오 신기방기~~~

 

forEach()와 map()의 가장 큰 차이점은 새로운 배열을 리턴한다는 거!

꼭 기억하자ㅏ자ㅏㅏ자자자자자

 

 

 

---

 

정리

 

배열 전부를 반복하려면 forEach() 사용!

배열 전부 반복하고 새 배열을 얻고 싶다! map() 사용 ~

 

 

 

 

 

 

출처 : m.blog.naver.com/wideeyed/221877912230

[JavaScript] for vs. forEach vs. map