map 함수

map 함수는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.
그리고 콜백 함수의 반환값으로 구성된 새로운 배열을 반환한다.

map과 forEach는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다는 점에서 비슷하다. 하지만 forEach는 return값으로 undefined를, map은 콜백 함수의 반환값들로 구성된 새로운 배열을 반환하는 점에서 차이점이 있다.

이런 점에서 forEach는 단순히 반복문을 대체하기 위한 함수이고 map 함수는 새로운 배열을 생성하는 함수인 것을 알 수 있다.

예를들어,

[1, 2, 3, 4, 5].map(() => 1);
// [1, 1, 1, 1, 1]

결과는 [1, 1, 1, 1, 1]가 나온다.

map은 첫번째 인자로 현재 item을, 두번째 인자로 index를 , 세번째 인자로는 map함수를 호출한 배열 자체인 this를 전달받을 수 있다.

[1, 2, 3, 4, 5].map((item) => item + 1);
// [2, 3, 4, 5, 6]

react에서의 활용

<ul>
  {toDos.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>