Map() 매서드 이해하기

 

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

 

const array1 = [1, 4, 9, 16];

const map1 = array1.map(x => x * 2);
console.log(map1); // 결과: Array [2, 8, 18, 32]

위의 코드를 한번 보면 배열에 들어있는 값을 화살표 함수를 이용하여 배열의 값을 매개변수로 받아서 각 배열의 값을 반복문을 돌며 값을 출력하는 코드입니다. 

 

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.

thisArg 매개변수가 map에 전달된 경우 callback 함수의 this값으로 사용됩니다. 그 외의 경우 undefined값이 this 값으로 사용됩니다. callback 함수에서 최종적으로 볼 수 있는 this 값은  함수 내 this를 정하는 일반적인 규칙에 따라 결정됩니다. map은 호출한 배열의 값을 변형하지 않습니다. 단, callback 함수에 의해서 변형될 수는 있습니다.

이 map 매서드를 사용하여 기존 값은 변경하지 않고 새로운 변수에 변경된 값을 사용할 수 있습니다. 자바스크립트의 데이터 불변성에도 아주 적합한 코드입니다. 

let numbers = [1, 4, 9];
let doubles = numbers.map(function(num) {
  return num * 2;
}); 

// numbers : [1, 4, 9] 변하지 않음.
// doubles : [2, 8, 18]

 

map 매서드는 배열뿐만 아니라 객채(Object)도 반환할 수 있습니다.

let kvArray = [{key:1, value:10},
               {key:2, value:20},
               {key:3, value: 30}];

let reformattedArray = kvArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// kvArray는 변하지 않음.
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]