JavaScript - map()

map()은 무엇인가?

map method는 배열 내의 모든 요소 각각에 대해 주어진 함수를 호출하여 새로운 배열을 반환합니다. 즉, 배열 안에 있는 요소들을 하나하나씩 반환합니다.

 

map 메소드는 다음과 같은 구조로 되어 있습니다.

array.map((요소, 인덱스, 배열) => {return 요소});

 

예를 들어 map()을 이용하여 days라는 배열에 🤞라는 이모지를 추가하는 예제를 살펴보면

const days = ["Mon", "Tue", "Wen", "Thus", "Fri"];

const dayAddEmoji = days.map(day => `${day} 🤞`)

console.log(dayAddEmoji)
["Mon 🤞", "Tue 🤞", "Wen 🤞", "Thus 🤞", "Fri 🤞"]

 

days라는 배열의 각각의 값을 day라는 요소로 받아 map 메소드 안에 함수를 사용하여 각각 day 값들을 return 합니다.

 

map 메소드는 object 값에도 사용할 수 있습니다.

const foodCourt = [
    {id:1, name: "Jjajang"},
    {id:2, name: "Tteokbokki"},
    {id:3, name: "Bibim Noodles"},
    {id:4, name: "pork cutlet"}
   ];
   
  const foodCourtName = foodCourt.map(food => food.name);
  
  console.log(foodCourtName);
  //["Jjajang", "Tteokbokki", "Bibim Noodles", "pork cutlet"]

foodCourt 의 object 중에 name 값만 사용하고 싶을 경우에 map 메소드를 사용하면 유용합니다.

 

 

 

또한, map 메소드를 사용한다고 해서 이전 값이 바뀌지는 않습니다.

아까 foodCourt 예제를 살펴보면 foodcourt 배열은 map 메소드 사용 이후에는 변하지 않습니다.

  console.log(foodCourt);
  /*
  const foodCourt = [
    {id:1, name: "Jjajang"},
    {id:2, name: "Tteokbokki"},
    {id:3, name: "Bibim Noodles"},
    {id:4, name: "pork cutlet"}
   ];
  */
  
  console.log(foodCourtName);
  //["Jjajang", "Tteokbokki", "Bibim Noodles", "pork cutlet"]

 

이렇게 JavaScript에서 많이 쓰이는 map method에 대해서 알아보았습니다.