자바스크립트 map()

 

자바스크립트의 배열 객체의 메소드 중에는 map()이라는 메소드가 존재합니다. 

map() 메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해줍니다. 

 

 

map() 메소드의 기본형은 다음과 같습니다(출처:MDN).

map() 메소드의 인자로는 배열의 각 요소를 처리할 콜백함수가 전달됩니다. 여기에서 콜백함수의 인자는 최대 4가지가 가능하지만, 주로 현재의 값(currentValue)과 인덱스 번호(index)가 많이 사용됩니다.

 

 

간단한 예제를 보겠습니다. 

const animal = ["Rabbit", "Cat", "Dog"]
 
animal.map(function(current, index){
  console.log(current, index)
})

예제에서는 요소가 3개인 배열에 대해서 map() 메소드를 호출하였습니다. 인자로 전달된 콜백함수는 현재의 값과 인덱스 번호를 인자로 전달받는 함수입니다. 그 결과 map은 배열의 요소 개수인 3번만큼 콜백함수를 호출하게 되고, 호출 시마다 배열의 인자가 차례대로 한번씩 콜백함수에 전달됩니다. 아래는 실행 결과입니다.

 

각 요소가 차례대로 console에 표시되는 것을 확인할 수 있습니다. 

참고로, map() 메소드는 호출한 배열의 값을 변형하지는 않습니다. 콜백 함수에 의해서 변형된 결과 새로운 배열이 생성됩니다.