array.map

Tags
변환
새로운 배열 생성
요약
모든 요소에 대해 콜백함수를 적용시켜서 새로운 배열 반환 기존의 배열은 그대로
 
arr.map(callback(currentValue[, index[, array]])[, thisArg])
  • 배열의 각각의 요소별로 콜백함수를 적용하고, 그 결과들을 모아 새로운 배열을 반환함.
      • 즉 기존의 배열에 연산을 거쳐 새로운 배열을 만들고 싶을 때 유용.
  • 기존의 배열은 그대로.

매개변수

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

반환값

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

적용 예시

각 배열 요소 전부에 함수를 적용시켜서 나온 결과값으로 새로운 배열을 만듦.
const numbers = [4, 9, 16, 25, 36];

const result = numbers.map(Math.sqrt);
console.log(result);

==> [ 2, 3, 4, 5, 6 ]
const oneTwoThree = [1, 2, 3];

const result = oneTwoThree.map((v) => {
  return v + 1;
});

result; // [2, 3, 4]

오브젝트 배열 재구성 예시

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

const reformattedArray = kvArray.map(obj=>{
   const 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}]