배열 API를 알아두면, 좀 더 쉽게 선언형 프로그래밍이 가능하다. 유용한 API가 잔뜩이지만 그 중 제일 잘 사용하는 것은 map이다. 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, 늘 새로워 짜릿해...🤔