[JavaScript] Map 메소드

map() 메소드란?

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

map() 메소드 구문

// reduce - 기본 문법
arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수

1. callback

map()는 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. callback 함수는 undefined도 포함하여 배열 값이 들어있는 인덱스에 대해서만 호출된다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않는다.

• 현재 값 (currentValue)
  - 현재 처리할 요소
• 현재 인덱스 (currentIndex) - optional
  - 현재 처리할 요소의 인덱스
  
• array(array/src) - optional
  - map() 메소드를 호출한 현재 배열/원본 배열

2.thisArg - Optional

callback을 실행할 때 this로 사용되는 값.

---

예제로 Map 메소드 이해해보기

1. 배열 내 숫자들의 제곱근을 구하여 새로운 배열 만들기

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

• Map()메소드는 기존 배열을 변형하지 않고 새로운 배열을 생성해준다.
• 위 예시 코드 속 map() 메소드의 코드 구성
  * map() 메소드 기본 구조 : arr.map(callback(currentValue[, index[, array]])[, thisArg]) 
  * arr = numbers : map을 적용하고 싶은 기존의 배열
  * currentValue = Math.sprt : map이 처리할 현재 요소로, 전달받는 인수의 제곱근을 구해주는 Math.sprt 메소드가 사용
  * 나머지 index, array, thisArg는 생략되었음.

2. 배열 내 숫자들의 곱하기 2 값을 구하여 새로운 배열 만들기

   2-1) 화살표 함수 사용한 코드

var numbers = [1,2,3,4,5,6,7,8,9];
var newNumbers = numbers.map(number => number *2); // [2, 4, 6, 8, 10, 12, 14, 16, 18]

   2-2) function 함수 사용한 코드

var numbers = [1,2,3,4,5,6,7,8,9];
var newNumbers = numbers.map(function(number){
  return number*2;  // [2, 4, 6, 8, 10, 12, 14, 16, 18]
});

   2-3) 전역 function 함수로 선언하여 map()에 사용한 코드

var numbers = [1,2,3,4,5,6,7,8,9];

function multiplyTwo(number){
    return number *2;
}
var newNumbers = numbers.map(multiplyTwo); //[2, 4, 6, 8, 10, 12, 14, 16, 18]

• 위 코드는 map() 메소드의  currentValue(*현재 처리할 요소)에 배열을 number으로 지정하고 각 배열을 곱하기 2해달라는 코드가 작성되었다.
• 세 코드들의 결과 값은 numbers 배열에 곱하기 2를 한 값이 newNumbers에 반환되므로 결국 같은 반환값들을 출력한다.

3. 배열 속 객체 재구성하기

var listPeople = 
    [{name : "Jin", age : 50},
     {name : "ann", age : 20},
     {name : "Hanna", age : 30},
     {name : "Jenny", age : 10}];
 
 var newList = listPeople.map(function(obj){
        var returnObj = {};
        returnObj[obj.name] = obj.age;
        return returnObj;
    }); 
    
/* 반환값
[{ "Jin": 50 },
{ "ann": 20 },
{ "Hanna": 30 }
{ "Jenny": 10 }]
*/

• 위 코드는 map() 메소드의  currentValue(*현재 처리할 요소)에 function 함수를 적용하여 재구성된 배열을 반환하는 코드가 작성된 것이다.
• 우선 returnObj라는 변수를 지정하여 배열을 초기화시키고,
• 이후 returnObj의 key값에 기존 배열의 name을 맵핑시키고, value값에 기존 배열의 age를 맵핑 시킨 것이다.

4. 배열 속 객체 reverse하기

var numbers = [1,2,3,4,5,6];
var numbersReverse  = numbers.map(number => number *2).reverse(); //[ 12, 10, 8, 6, 4, 2 ]

• 위 코드는 .reverse() 메소드를 이용해서 객체들의 index를 reverse했다.

5. 배열 속 배열은 어떻게 계산되는지?

var numbers = [[1,2,3],[4,5,6],[7,8,9]];
var newNumbers = numbers.map(array => array.map(number => number *2)); 
//[ [ 2, 4, 6 ], [ 8, 10, 12 ], [ 14, 16, 18 ] ]

• 배열 그 자체로 계산되어 반환된다.

 

출처

• Mdn (Link)