[ Javascript ] Array.prototype.map()

map() 메서드

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

 

구문

arr.map(callback(currentValue[, index[, array]])[, thisArg])

 

매개변수

• callback: 새로운 배열 요소를 생성하는 함수( 아래 세 가지 인수를 가집니다. )
• currentValue: 처리할 현재 요소
• index: 처리할 현재 요소의 인덱스
• array: map()을 호출한 배열
• thisArg: callback을 실행할 때 this로 사용되는 값

 

반환 값

배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열

 

예제

배열에 들어있는  숫자들의 제곱근을 구하여 새로운 배열을 만들기

let number = [1, 4, 9, 21];
let roots = number.map(Math.sqrt);

console.log(number); // [1, 4, 9, 21]
console.log(roots); // [1, 2, 3, 4.58257569495584]

 

map()을 활용해 배열 속 객체를 재구성하기

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

let reformttedArr = kvArr.map(function (obj) {
  let rObj = {};
  rObj[obj.key] = obj.value;

  return rObj;
});

console.log(kvArr); // [{key:1, value: 10}, {key:2, value: 20}, {key:3, value: 30}]
console.log(reformttedArr); // [{1: 10}, {2: 20}, {3: 30}]

 

인자를 받는 함수를 사용하여 숫자 배열 재구성하기

let number = [1, 2, 5, 8, 20];

let double = number.map(function (num) {
  return num * 2;
});

console.log(number); // [1, 2, 5, 8, 20]
console.log(double); // [2, 4, 10, 16, 40]

 

map()을 포괄적으로 사용하기

:: ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법입니다.

let map = Array.prototype.map;

let a = map.call("Hello World", function (x) {
  return x.charCodeAt(0);
});

console.log(a); // [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]