[JavaScript] map() 이란?

Array.prototype.map

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

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

1) callback : 새로운 배열 요소를 생성하는 함수로 다음 세 가지 인수를 가짐

• currentValue : 처리할 현재 요소
• index : 처리할 현재 요소의 인덱스
• array : map()을 호출한 배열
• thisArg : callback을 실행할 때 this로 사용되는 값

2) map 메소드란

• callback 함수의 각각 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다.
• callback 함수는 배열 값이 들어 있는 인덱스에 대해서만 호출되며 값이 삭제되거나 할당/정의되지 않은 인덱스는 호출되지 않는다.
• thisArg 매개변수가 map에 전달된 경우 callback 함수의 this 값으로 사용된다. 그 외의 경우는 undefined 값이 this로 사용된다.
• map은 호출한 배열의 값을 변형하지 않지만 callback 함수에 의해 변형될 수는 있다.

✏️ 예시

• 배열에 들어 있는 숫자들의 제곱근을 구해 새로운 배열 만들기

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

• 배열 속 객체를 재구성하기

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

kvArray 배열은 key, value 라는 두 개의 프로퍼티를 가진 객체로 구성되어 있다.

reformattedArray 배열은 kvArray 배열의 각 요소에 콜백 함수를 실행해 obj라는 매개변수를 받아 새로운 객체 rObj를 생성한다.

rObj[obj.key]는 현재 map이 처리하고 있는 요소의 key 프로퍼티의 값을 의미한다. (=> obj.key = 1)

즉 rObj 객체의 1이라는 이름의 프로퍼티를 참조한다.

따라서 key 프로퍼티를 새로운 객체의 이름으로, value 프로퍼티를 그 값으로 설정한다는 내용이다.

 

• 숫자 배열 재구성하기

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

 

---

 

 

프로그래머스

function solution(strArr) {
    return strArr.map((v, i) => i % 2 === 0 ? v.toLowerCase() : v.toUpperCase())
}

 

알고리즘 문제를 풀다가 다른 분이 map에 매개변수로 v, i를 넣어 푼 코드를 보고 i가 왜 들어간 건지 궁금해 공식 문서를 찾아봤다.

파이썬에서는 그냥 쉽게 split이랑 많이 써서 나눠주는 역할인가보다 지레짐작 했는데 js에서는 좀 더 광범위한 역할을 하더라...

내가 알고 있다고 생각하는 것조차 사실 잘못 알고 있거나 알고 있는 게 아닐 수 있다...!