map() 함수

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들때 사용한다. (기존 배열은 변하지 않음)

 

map 함수는 모든 배열의 값에 function을 실행하는 메서드이다. 기존 배열의 값들을 특정값으로 변경하기 위해 map()이 많이 쓰인다.( 단순하게 반복을 위해 사용하기도함)

array.map(callbackFunction(currentValue[, index[, array]])[, thisArg]);

filter, forEach와 같은 구문임.

• currentValue: 배열 내 현재 값
• index: 배열 내 현재값의 인덱스
• array: 현재 배열
• thisArg: callbackFunction 내에서 this로 사용될 값

 

const nums = [1,2,3];
const newNums = nums.map(x => 2*x);
console.log(newNums) // [2,4,6]

위의 예시는 아래의 for 문과 동일함.

const nums = [1,2,3];
let newNums = [];
for(var i = 0; i < num.length; i++) {
 newNums.push(nums[i]*2);}
}

console.log(newNums); // [2,4,6]

동일한 결과를 반환하는 예제이지만 첫번째 코드가 훨씬 간결하고 보기 쉽다능...

 

const site = [
  {id: 1, name:'web'},
  {id: 2, name: 'is'},
  {id: 3, name: 'free'},
];
const newSite = site.map(site => site['id']+ '-'+ site['name']);
console.log(newSites); // ["1-web", "2-is", "3-free"]

배열 안에 객체를 가진 경우, map()을 사용하여 배열의 값이 가진 객체의 특정 프로퍼티를 가져온 후 문자열을 반환할 수 있음.

 

 

this를 변경하는 방법

myArray = [1,2,3];
myArray.map(function(x) {
  console.log(this);
  return x;
}, 'test');

// Result
String {"test"}
String {"test"}
String {"test"}

map()에서 콜백 이외에 this의 값을 다른 값으로 매핑할 수 있도록 설정할 수 있음. 위의 예제와 같이 this의 값으로 'test'라는 문자열을 넘겨주는 것도 가능함.

 

 

! 주의할 점

이 경우 Block scope를 사용하는 ES6의 화살표 함수를 사용하면 안됨.

이 경우, 머리 객체에 해당하는 window 객체를 반환하니 주의할 것

myArray.map((x) => (console.log(this)), 'test');
// 문자열 test가 아닌 window 객체를 반환함.