[ JavaScript ] - Array에 쓸 수 있는 유용한 함수 "map"

Array.prototype.map()

• mdn정의
  "The map() method creates a new array populated with the results of calling a provided function on every element in the calling array."

=> 나름대로 이해하며 해석해보자면, map()은 array의 모든 요소를 돌면서 주어진 function을 호출한 결과를 담은 새로운 array를 만들어내는 메서드이다.

=> 배열의 각 요소에 접근해 어떠한 함수를 실행시키고 그 결과를 모아 새로운 배열을 반환하고 싶을 때 사용하면 되겠다.

Syntax

// Arrow function
map((element) => { /* ... */ })
map((element, index) => { /* ... */ })
map((element, index, array) => { /* ... */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function(element) { /* ... */ })
map(function(element, index) { /* ... */ })
map(function(element, index, array){ /* ... */ })
map(function(element, index, array) { /* ... */ }, thisArg)

• callbackFn
  array의 모든요소에 호출되어지는 콜백함수를 파라미터로 갖는다. 콜백함수가 실행될 때마다 반환된 값은 새로운 배열에 추가된다. 이 콜백함수는 아래와 갖은 인자를 갖는다.
  • element
    array에서 진행되고 있는 현재의 요소를 의미한다.
    
  • index
    array에서 진행되고 있는 현재 요소의 index를 의미한다.
    
  • array
    map이 호출된 array를 의미한다.
• thisArg (Optional)
  콜백함수가 실행될 때 this로 사용되어지는 value를 의미한다.
  

Return 값

map()을 실행하면 각각의 요소에 콜백함수를 실행한 결과를 담은 새로운 array가 반환된다.

따라서, 아래와 같은 경우엔 map()보다는 forEach나 for...of를 사용하는게 낫다.

• 반환된 새로운 array를 사용하지 않거나
• 콜백함수가 반환하는 값이 없는 경우

( 왜냐하면 새로운 array를 반환해도 사용하지 않으니까!! )

📌예

class Asset {
  constructor(name,shape,price) {
    this.name = name;
    this.shape = shape;
    this.price = price;
  }
}

const assetList = [
  new Asset('car', '🚗', 10000000),
  new Asset('house', '🏡',2000000000),
  new Asset('cash','💵', 3000000)
];

//Q. assetList에서 price만 담은 배열을 만들고 싶다면?
const priceList = assetList.map(asset => asset.price); 
console.log(priceList); //output: [10000000, 2000000000, 3000000]

참고
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map