🙆🏻‍♀️ [JS] map & forEach 🙆🏻‍♀️

배열 APIs

배열 API를 알아두면, 좀 더 쉽게 선언형 프로그래밍이 가능하다. 유용한 API가 잔뜩이지만 그 중 제일 잘 사용하는 것은 map이다. map은 foreach와 비교되곤 한다.
둘 다 반복 작업이 필요할 때 사용되는데, 차이점은 무엇일까...?

map & forEach

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

arr.forEach(function(item, index, array) {
  console.log(`item: ${item}, index: ${index}, array: ${array}`);
  return item;
}); // undefined

arr.map(function(item, index, array) {
  console.log(`item: ${item}, index: ${index}, array: ${array}`);
  return item;
}); // [1, 2, 3, 4, 5]

/*
item: 1, index: 0, array: 1,2,3,4,5
item: 2, index: 1, array: 1,2,3,4,5
item: 3, index: 2, array: 1,2,3,4,5
item: 4, index: 3, array: 1,2,3,4,5
item: 5, index: 4, array: 1,2,3,4,5
*/

둘 다 사용하는 방식은 같다.
위와 같이 로그를 찍는 함수를 작성했을 시 찍히는 값도 같다.
그러나 foreach는 반환값을 무시한다.

map은 함수의 결과값을 저장하여 새로운 배열로 반환해준다.
목록을 뿌려줄 때 사용 만점...❣

성능은 forEach가 더 빠르다. (map은 함수의 결과값을 가지고 배열로 다시 반환해주기 때문에...)
forEach로 map과 같은 결과를 낼 수도 있다.

하지만 한 번 더 코드를 거쳐야 하기에 적재적소에 맞게 map과 forEach를 사용해보자.

foreach는 함수의 결과값을 저장할 필요가 없이 실행하기만 하면 되는 작업을 할 때 사용하면 좋다.

map은 기존의 배열을 유지한 채, 원하는 작업을 거친 새로운 배열이 필요할 때 사용하면 좋다.

// react
somethigLists.map(list => <li key={list.idx}>이름: {list.name}</li>)

세상에, 간단해😏

for문으로 작성했다면, 훨씬 복잡했을 코드가 ES5 문법으로 세상 간단해졌다.
이것을 맛깔나게 쓰는 것은 나의 몫...
어떠한 원리로 돌아가는지 유념하는 것도 나의 몫...
JS, 늘 새로워 짜릿해...🤔

배열과 메서드 - 코어 자바스크립트