[JS] Map 함수

Map 함수

 

map 함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.

 

 

array.map(callbackFunction(currenValue, index, array),thisArg);

 

 

filter, forEach와 같은 구문이다.

 

callbackFunction, thisArg 두개의 매개변수가 있고

callbackFunction은 currentValuem, index, array 3개의 매개변수를 갖는다.

• currentValue: 배열 내 현재 값
• index : 배열 내 현재 값의 인덱스
• array : 현재 배열
• thisArg : callbackFunction 내에서 this로 사용될 값

 

const Num = [1, 2, 3, 4, 5, 6]

이런 변수가 있다고 하자

이때 모든 값에 숫자를 추가하고 샆다면  map()함수를 이용하는 것이다. map() 함수는 모든 배열의 값에 Function을 실행하는 Method이다.

즉 Num.map() 한다는 것은 Num에 있는 모든 숫자에 function을 실행하고 function에서 나온 값을 저장해서 새로운 배열로 만든다는 것이다.

 

 

ex) { i 와 psh을 대문자로 바꿔보겠다.}

const introduce = "i am psh"

console.log(
  introduce
    .split(" ")
    .map((item, index) => {
      return index % 2 ? item : item.toUpperCase();
      })
      .join(" ")
);

//I am PSH

※join() 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 만든다

 

ex.2)

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const multNumber = numbers.map(number => number * 2);
console.log(multNumber); // [2, 4, 6, 8, 10, 12, 14, 16, 18]

 

 

ex.3) {object(객체) 을 재구성할 수 있다.}

const keyArray = [
   {key:1, value: 10},
   {key:2, value: 20},
   {key:3, value: 30},
   {key:4, value: 40},
];

const reformKeyArray = keyArray.map((obj) =>{
     const robj = {};
     robj[obj.key] = obj.value;
     return robj;
     
});
// (4) [{...}, {...}, {...}, {...}]
//         0: {1: 10}
//         1: {1: 20}
//         2: {1: 30}
//         3: {1: 40}

 

ex.4(for of..)

const products = [
  {name:"현대차", price: 2000},
  {name:"아우디", price: 9000},
  {name:"BMW", price: 8500},
  {name:"폭스바겐", price: 4000}

]

const map = (callback, arr) =>{
  const result = []
  for(const a of arr) {
    result.push(callback(a))
  }
  return result
}

console.log (products.map(v => v.name))
console.log(products.map(v => v.price + "만원"));