[TIL] 자바스크립트 map 함수

Map 함수?

새로운 배열을 만들 때 사용한다.

• 결과로 새로 나오는 새 배열과 기존배열은 다르다.
• callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.
• callbackFunction은 다른 함수에 인수로 전달된 함수로, 외부 함수 내부에서 호출되어 일종의 루틴이나 작업을 완료하는 것을 의미한다.
  
  

Map 함수 구조

[배열].map(callback(currendValue, index, array), thisArg)

• map 함수는 callback과 thisArg 함수를 가지고 있다.
• callback은 current, index, array 등 3개의 인수를 가진다.
  • currentValue : 배열의 현재 요소
  • index(optional) : 배열의 현재 요소의 인덱스
  • array(optional) : map()을 호출한 배열, arr의 배열을 가져 오는 것
• thisArg : callback을 실행할 때 this로 사용되는 값
• 즉, arr의 값을 하나씩 불러와서 thisArg값에 맞게 실행한 후 새로운 배열을 보내는 구조
  
  

const num = [1,2,3,4,5,6,7,8,9];
const result = num.map(number => number * 2);
console.log(result);

• num 배열을 가져와 number값에 하나씩 넣는다.
• currentValue는 현재 값 *2를 한다.
• 곱한 값은 result라는 변수에 담아준다.
• num 배열을 모두 실행하면, map 함수는 종료되고 새로운 result 배열에 저장하여 호출할 수 있다.
• index, array 인수는 사용하지 않았다.
  
  

예제

1) 제곱근 구하기

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

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

3) 인자를 받는 함수를 사용하여 숫자 배열 재구성

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

4) 기존 배열 안에 있는 원소들 타입 변환

• 배열 안에 원소의 타입이 string → number로 변환

let str_arr = [ '1', '2', '3', '4', '5']
let int_arr = str_arr.map(Number)
console.log(int_arr) // [ 1, 2, 3, 4, 5 ]

참고 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://devbirdfeet.tistory.com/80

https://tocomo.tistory.com/24