map

Array.prototype.map()에대해 알아보자.

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

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

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

그렇다고 한다. 솔직히 이해가안가서, 예제를 통해 조금더 알아보자

let arr1 = [1,2,3,4];
let map1= arr1.map(x => x * 2);
console.log(map1);

(4) [2, 4, 6, 8]

map1 에 새로운 배열값이 생겼다.

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다는게 무슨말인지 조금이해가 된거같다. 다른예제를 통해 더 알아보자.

MDN에 좋은예제들이 가득해서 가져와봤다.

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

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

이런 배열 뿐만아니라, 배열속 객체를 재구성이 가능하다.

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

let reformattedArray = objArray.map(function(obj){
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray는 [{1:10}, {2:20}, {3:30}]

// objArray 그대로
// [{key:1, value:10},
//  {key:2, value:20},
//  {key:3, value: 30}]

훌륭하다.

더 좋은 예제들과 까다로운 경우가있지만, 머리가 아프니 일단은 천천히 알아가보자