TIL | Node.js_Map()

Array.prototype.map()

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

구문

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

매개변수

• callback : 새로운 배열 요소를 생성하는 함수로 다음 세 가지 인수를 가집니다.

1. currentValue : 처리할 현재 요소.
2. index : 처리할 현재 요소의 인덱스.(Optional)
3. array : map()을 호출한 배열.(Optional)

• thisArg : callback을 실행할 때 this로 사용되는 값.(Optional)

리턴값

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

예제

• 배열에 들어있는 숫자들의 제곱근을 구하여 새로운 배열을 만들기
• var numbers = [1, 4, 9]; var roots = numbers.map(Math.sqrt); // roots는 [1, 2, 3] // numbers는 그대로 [1, 4, 9]
• map을 활용해 배열 속 객체를 재구성하기
• let kvArray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}] let reformattedArray = kvArray.map(obj => { let rObj = {} rObj[obj.key] = obj.value return rObj }) // reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], // kvArray is still: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}]
• 인자를 받는 함수를 사용하여 숫자 배열 재구성하기
• var numbers = [1, 4, 9]; var doubles = numbers.map(function(num) { return num * 2; }); // doubles는 이제 [2, 8, 18] // numbers는 그대로 [1, 4, 9]
• map을 포괄적으로 사용하기 (querySelectorAll)
• 아래 예제는 querySelectorAll을 사용해서 수집된 객체들을 순회 처리하는 법을 보여줍니다. 이번 경우 체크한 옵션 박스를 콘솔에 프린트합니다. var elems = document.querySelectorAll('select option:checked'); var values = [].map.call(elems, function(obj) { return obj.value; });

[더 쉬운 방법]

• Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운Array 객체를 만듭니다.

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

까다로운 사례

map에 하나의 인자(순회하는 원소)만 받는 콜백을 사용하는 경우가 많습니다. 그러나 어떤 함수는 대개 하나의 인자로 호출하지만 두 개 이상의 인자를 사용하는 경우도 있습니다. 이로 인해 어떤 경우 혼란스러울 수도 있습니다.

// 아래 라인을 보시면...
['1', '2', '3'].map(parseInt);
// 결과를 [1, 2, 3] 으로 기대할 수 있습니다.
// 그러나 실제 결과는 [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]