고차함수(1) - Array.prototype.map

map 메서드는 자신을 호출한 배열의 모든 요소 각각을 순회하면서 인수로 전달받은 콜백 함수를 반복 호출하고,

콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다. (원본 배열은 변경되지 X)

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]

forEach vs map

- forEach 메서드와 map 메서드의 공통점: 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다는 것

- forEach: 언제나 undefined 반환 -> 반복문을 대체하기 위한 고차 함수

- map: 콜백 함수의 반환값들로 구성된 새로운 배열을 반환 -> 요소값을 다른 값으로 mapping한 새로운 배열을 생성하기 위한 고차 함수

 

map의 중요한 특징

- map 메서드가 생성하여 반환하는 새로운 배열의 length 프로퍼티 값은 map 메서드를 호출한 배열의 length 프로퍼티 값과 반드시 일치!!!!!!!!!!!! -> 1:1 매핑

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

매개 변수: callback, currentValue, index(선택), array(선택), thisArg(선택)

 

예제 

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

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

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;
});
// 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. map을 포괄적으로 사용하기 (String에 map사용해서 아스키코드 인코딩 값 배열 얻는 법)

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]

5. map을 포괄적으로 사용하기 (querySelectorAll)

var elems = document.querySelectorAll('select option:checked');
var values = [].map.call(elems, function(obj) {
  return obj.value;
});

 

+ 문제

['1', '2', '3'].map(parseInt);
// [1, NaN, NaN]

// parseInt 함수는 보통 하나의 인자만 사용하지만, 두 개를 받을 수 있습니다.
// 첫 번째 인자는 변환하고자 하는 표현이고 두 번째는 숫자로 변환할 때 사용할 진법입니다.
// Array.prototype.map은 콜백에 세 가지 인자를 전달합니다.
// 배열의 값, 값의 인덱스, 그리고 배열
// 세 번째 인자는 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]

 

 

<출처>

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

https://poiemaweb.com/js-array-higher-order-function