.map() / 배열 안에 함수 적용해 새로운 배열 생성

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

Array.prototype.map() - JavaScript | MDN

구문

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

callback - 새로운 배열 요소를 생성하는 함수. 다음 세 가지 인수를 가진다.

1. currentValue - 처리할 현재 요소.

2. index (optional) - 처리할 현재 요소의 인덱스.

3. array (optional) - map()을 호출한 배열.

thisArg (optional) - callback을 실행할 때 this로 사용되는 값.

 

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

 

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

예시

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]

예시2) 배열 속 객체를 재구성하기

오브젝트의 배열을 받아 각 오브젝트를 다른 형태으로 재구성해 새로운 배열한다.

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

까다로운 사례

// 아래 라인을 보시면...
['1', '2', '3'].map(parseInt);

 

결과를 [1, 2, 3] 으로 기대할 수 있지만 실제 결과는 [1, NaN, NaN].

이유는

parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있다.

첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법이다.

Array.prototype.map은 콜백에 세 가지 인자를 전달한다. 1. 배열의 값, 2. 값의 인덱스, 3. 배열

세 번째 인자는 parseInt가 무시하지만 두 번째 인자는 아니다.  따라서 혼란스러운 결과를 도출할 수 있다.

자세한 내용은 블로그 포스트를 참고.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 실제 결과가 예상한 대로 배열의 숫자와 같습니다.

// 위와 같지만 더 간단한 화살표 표현식
['1', '2', '3'].map(str => parseInt(str));

// 더 간단하게 해결할 수 있는 방법
['1', '2', '3'].map(Number); // [1, 2, 3]
// 그러나 `parseInt`와 달리 float이나 지수표현도 반환합니다.
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]