map()의 이해

Array.prototype.map()

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

Syntax

// Arrow function
map((element) => { ... } )
map((element, index) => { ... } )
map((element, index, array) => { ... } )

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function callbackFn(element) { ... })
map(function callbackFn(element, index) { ... })
map(function callbackFn(element, index, array){ ... })
map(function callbackFn(element, index, array) { ... }, thisArg)

 

구문

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

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

반환 값

 callback의 결과를 모은 새로운 배열

 

map() 예제

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.

 

1) 배열의 제곱 구하기

var numbers = [1, 4, 9];
var doubles = numbers.map((num) => num * 2);
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]

 

2) 배열의 제곱근 구하기

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots는 [1, 2, 3]
// numbers는 그대로 [1, 4, 9]

 

3) 배열 속 객체 재구성

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

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

console.log(reformattedArray); // reformattedArray는 [{1:10}, {2:20}, {3:30}]

console.log(kvArray);
// kvArray는 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

 

sort()와 map()을 사용한 효율적인 정렬

 sort()의 compareFunction은 배열 내의 요소마다 여러 번 호출될 수 있기 때문에 높은 오버헤드가 발생할 수 있다. compareFunction이 복잡해지고 정렬할 요소가 많아질 경우, map()을 사용해 임시배열을 하나 만들고 임시배열에 실제 정렬에 사용할 값만을 뽑아 정렬하고, 그 결과를 이용해 실제 정렬을 한다.

// 소트 할 배열
var list = ['Delta', 'alpha', 'CHARLIE', 'bravo'];

// 임시 배열은 위치 및 정렬 값이있는 객체를 보유합니다.
var mapped = list.map(function(el, i) {
  return { index: i, value: el.toLowerCase() };
})

// [{index: 0, value: "delta"},
// {index: 1, value: "alpha"},
// {index: 2, value: "charlie"},
// {index: 3, value: "bravo"}    ]

// 축소 치를 포함한 매핑 된 배열의 소트
mapped.sort(function(a, b) {
  return +(a.value > b.value) || +(a.value === b.value) - 1;
});

// [ {index: 1, value: "alpha"},
//   {index: 3, value: "bravo"}
//   {index: 2, value: "charlie"},
//   {index: 0, value: "delta"}   ]


// 결과 순서를 위한 컨테이너
var result = mapped.map(function(el){
  return list[el.index];
});

// ["alpha", "bravo", "CHARLIE", "Delta"]