Array.prototype.map()

오늘은 map() 함수에 대해서 간단히 알아보자.
map()함수는 React에 갔을 때 굉장히 유용하게 사용할 수 있으니 잘 알아두자.

어떤 배열이 있다고 가정해보자.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

이 배열의 모든 아이템에 이모티콘을 추가하거나 숫자를 추가하고 싶거나 혹은 각 요소값을 두 배로 만들고 싶을 수 있다.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const everyDays = days.map(function potato() {
  return potato;
})

console.log(everyDays); //[ 'Mon', 'Tue', 'Wed', 'Thurs', 'Fri' ]

화살표 함수를 사용해서 만들 수도 있다.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const everyDays = days.map(potato => potato);

console.log(everyDays); //[ 'Mon', 'Tue', 'Wed', 'Thurs', 'Fri' ]

여기서 potato는 "Mon"부터 "Fri"까지 모두 될 수 있다.
map의 potato 함수는 각각 요소에 대해 한 번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. 각각 월요일, 화요일..금요일 마다 콜백함수 potato가 호출되는 것이다.
콜백함수(potato) 함수는 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.

앞서 설명한대로 이번엔 모든 요일에 ^^이모티콘을 삽입해보자.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const everyDays = days.map(day => `^^ ${day}`);

console.log(everyDays); //[ '^^ Mon', '^^ Tue', '^^ Wed', '^^ Thurs', '^^ Fri' ]

map은 콜백함수 외에도 많은 argument들을 전달한다. 그 중의 하나가 index이다.

const days = ["Mon", "Tue", "Wed", "Thurs", "Fri"];

const everyDays = days.map((day, index) => `${index} - ${day}`);

console.log(everyDays); // [ '0 - Mon', '1 - Tue', '2 - Wed', '3 - Thurs', '4 - Fri' ]

첫 번째 argument인 day는 월,화,수,목,금 배열 각각의 요소이고 두 번째 argument는 각 요소의 인덱스이다.