[JS] 📚 map 고차함수 - 이해하기 쉽게 설명

map 고차함수

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. array를 돌면서 array 로 결과가 출력된다.

 

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

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

var numbers = [ 1,2,3,4,5,6,7,8,9];

function multiplyTwo(number){
    return number *2;
}
var newNumbers = numbers.map(multiplyTwo);
console.log(newNumbers); // [2, 4, 6, 8, 10, 12, 14, 16, 18]

var numbers = [4,9,16,25,36];
var result = numbers.map(Math.sqrt);
console.log(result); // [ 2, 3, 4, 5, 6 ]

---

map 활용 실전 예제

 

[객체에서 name값만 추출해서 배열로 저장]

var students = [
  {id:1, name:"james"},
  {id:2, name:"tim"},
  {id:3, name:"john"},
  {id:4, name:"brian"}
];


// for문
var arr = new Array();
for (let obj of students){
 arr.push(obj.name);   
}
console.log(arr); // ['james', 'tim', 'john', 'brian']


// map
var names = students.map(student =>student.name);
console.log(names);  // ['james', 'tim', 'john', 'brian']

​

[array1배열의 요소들을 2배 해준 배열을 반환]

const array1 = [1, 4, 9, 16];


// for문 활용
const mmm = (arr) => {
  const arr2 = [];
  for(let i of arr){
    arr2.push(i*2);
  }
  return arr2;
}


// map 함수 활용
const map1 = array1.map(x => x * 2);


console.log(mmm(array1)); // [2,8,18,32]
console.log(map1); // [2,8,18,32]

 

[2차원배열 접근]

var numbers = [[1,2,3],[4,5,6],[7,8,9]]; //array안에 array가 있는 경우
var newNumbers = numbers.map(array => array.map(number => number *2));
console.log(newNumbers);

​

[리터럴 형태로 배열을 일자로 전달] (구조분해)

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 객체를 배열로 변환해서 배열 전용 메서드인 map을 적용하고 fromEntries를 사용해 배열을 다시 객체로 되돌립니다.
  // [["banana", 1], ["orange", 2], ["meat", 4]]
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

alert(doublePrices.meat); // 8

​

[객체를 받아와서 객체를 리턴]

: DB에서 쿼리값들을 배열객체로 저장하고, 기존 필드 대신 사용자 정의 필드를 생성해 다시 배열객체에 저장

const userList = [
    {userId:"1", firstName:"Seungwon", lastName:"Go", yyyymmdd:"19770513", phone:"010-1111-1111", address:"Jeju"},
    {userId:"2", firstName:"Jeremy", lastName:"Go", yyyymmdd:"19800103", phone:"010-1111-1112", address:"Seoul"},
    {userId:"3", firstName:"James", lastName:"Go", yyyymmdd:"19821113", phone:"010-1111-1113", address:"Seoul"},
]; // DB에서 가져온 쿼리 정보를 객체 형태로 저장

var mon = ["Jan", "Feb", "Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

const newUserList = userList.map(u => ({ // 그냥 u => { } 하면 함수가 되어버리니 괄호로 감싸서 객체를 리턴한다고 명시
    userId:u.userId, //기존 데이터를 이용한 새로운 필드 추가
    // firstName:u.firstName, 
    // lastName:u.lastName, 
    fullName:u.firstName+' '+u.lastName,
    //yyyymmdd:u.yyyymmdd, 
    year: u.yyyymmdd.substring(0,4),
    month: u.yyyymmdd.substring(4,6),
    day: u.yyyymmdd.substring(6,8),
    usDataFormat: mon[parseInt(u.yyyymmdd.substring(4,6)) - 1] + " " + parseInt(u.yyyymmdd.substring(6,8)) + ", " + parseInt(u.yyyymmdd.substring(0,4)), 
    //나라마다 년월일 오는 순서가 다르다. 이 키는 월년일 로 오게 한다.
    phone:u.phone, 
    address:u.address
}));

console.log(newUserList);

정리하자면, map은 배열을 1대1로 짝짓되 기존 객체를 수정하지 않는 메서드입니다.

---

부록) map 과 forEach 차이점

​공통점 : array관련 메서드

• ​forEach()는 배열 요소마다 한 번씩 주어진 함수(콜백)를 실행
• map()은 배열 내의 모든 요소 각각에 대하여 주어진 함수(콜백)를 호출한 결과를 모아 새로운 배열을 반환

​

.forEach()는 결과로 array를 가지기 위해서 push를 통해 배열을 만들어줘야함

​

.map()은 새로운 배열을 반환