Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수(callback)를 호출하고,
그 결과를 모아서 만든 새로운 배열을 반환합니다. 
 * 기존의 배열은 건드리지 않는다.

 

map() 함수 대신에 forEach(), for문으로도 사용할 수 있다.

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

 

매개변수

callback

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

 

currentValue : 처리할 현재 요소

index : 처리할 현재 요소의 인덱스

array : map()을 호출할 배열 

 

thisArg

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

 

반환값

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

---

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

 

var numbers = [6, 10, 2];
var stringNum = numbers.map(function(v) {
    return v + '';
});
console.log(stringNum); // ['6', '10', '2']

// 예제 0 
var numbers = [6, 10, 2];
var stringNum = numbers.map(function(v) {
    return v + '';
});
console.log(stringNum); // ['6', '10', '2']
 
// 예제 1 
// 배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
console.log(roots);  // [1, 2, 3]
 
// 예제2
// map을 활용해 배열 속 객체를 재 구성하기
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;
})
console.log(reformattedArray); // [{1: 10}, {2: 20}, {3: 30}]
 
//예제3
// 인자를 받는 함수를 사용하여 숫자 배열 재구성하기
var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
    return num * 2;
});
console.log(doubles); // [2, 8, 18]
 
//예제4
// map을 포괄적으로 사용하기 
// 아래 예제는 String에 map을 사용해서 각 문자의 ASCII 인코딩 값을 요소로 갖는 배열을 얻는 방법을 보여줍니다
var map = Array.prototype.map;
var a = map.call('Hello World', function(x) {
    return x.charCodeAt(0);
})
console.log(a);

 

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

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d