[JS] Array.prototype.map() 함수 알아보기

map() 함수의 역할

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

// Pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// Expected output: Array [2, 8, 18, 32]

어떤 배열에 있는 모든 요소들의 값을 변경해서 만든 새로운 배열을 써야 할 때가 있습니다.

이 때 루프를 사용하여 배열에 대해 수동으로 반복 처리하는 대신, 간단히 기본 제공하는 Array.map() 메소드를 사용하면 됩니다.

 

이 Array.map() 메소드는 콜백 함수를 이용해 각각의 요소에 호출해서 그 값을 변환할 수 있게 해줍니다. 다시 말하자면 콜백 함수는 배열의 각 요소에 실행됩니다.

 

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

 

map() 함수 사용법 및 Syntax

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

1. 매개변수

callback : 새로운 배열 요소를 생성하는 함수로, 다음 3가지 인수를 가집니다.

• currentValue : 처리할 현재 요소.
• index : 처리할 현재 요소의 인덱스
• array:  map()을 호출한 배열.

2. 반환 값

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

---

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

var 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}]

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

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

이때 유의해야할 점은 map은 호출한 배열의 값을 변형하지 않습니다. 단, callback 함수에 의해서 변형될 수는 있습니다.

 

( 출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map )

Array.prototype.map() - JavaScript | MDN