JavaScript Map() 메서드 이해하기

🔍 Map 정의

---

• Map() 메서드는 배열 내 모든 요소에 대하여 callbackFunction을 실행한 결과를 모아 새로운 배열을 반환할 때 사용한다.
• Map() 메서드는 새로운 자료구조 혹은 객체를 정의할 때 사용한다. 그 중에서도 새로운 자료구조를 필요로 하는 경우에 많이 사용한다.
• 예를 들어, 어떤 서비스에 가입한 회원들의 이름, 나이, 연락처로 나누어진 각각의 데이터가 주어졌을 때 모든 데이터를 합친 회원 정보를 사용해야 하는 상황에 map() 메서드를 활용할 수 있다.
• callbackFunction, thisArg 두 개의 인자를 갖고, callbackfunction은 currentValue, index, array 세 개의 인자를 갖는다.

 

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

 

callbackFunction

• 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수
• 다른 코드의 인자로 넘겨주는 함수 (제어권도 함께 위임)

 

currentValue

• 배열의 요소 중 현재 값

 

index (Optional)

• 현재 값의 인덱스

 

array (Optional)

• map() 메서드의 대상이 되는 배열 자체

 

thisArg (Optional)

• callback Function 내부에서 **this로 인식할 대상
• 생략할 경우 일반적인 함수와 마찬가지로 전역 객체가 바인딩

** this: 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

 

🔍 For loop와 Map 비교 예제

---

 

배열 nums에 1을 더하고자 한다.

 

// for loop 사용

const nums = [0, 10, 100, 1000, 10000];
const result = [];

for (i = 0; i < nums.length; i++) {
    result.push(nums[i] + 1);
    if (i == 3) break;
}

console.log(result);
// [ 1, 11, 101, 1001 ]

 

// map 사용

const nums = [0, 10, 100, 1000, 10000];
const result = nums.map((nums) => nums + 1);

console.log(result);
// [ 1, 11, 101, 1001, 10001 ]

 

• MAP은 배열을 순회하므로 중간에 “break;” 를 사용하는 것이 불가능하다. 이런 경우라면 for loop를 사용해야 한다.
• MAP을 통해 새로운 배열(result)을 반환하였다. 호출한 배열(nums)의 값을 변형하지 않는다.

 

🔍 MAP() 예제 01 | 배열의 각 문자열 개수 세기

---

 

const name = ["MITT", "JIMIN", "MIEUN", "SUNWOO"];
const lengthOfName = name.map((name) => name.length);

console.log(lengthOfName);
// [ 4, 5, 5, 6 ]

 

💬 MAP을 통해 name의 각 요소들의 length를 호출한 결과를 모아, lengthOfName이라는 새로운 배열을 반환하였다.

 

🔍 MAP() 예제 02 | 배열 속 객체 재구성

---

 

const arr = [
    { name: "MITT", age: 28 },
    { name: "SOPHIE", age: 26 },
    { name: "PICKLE", age: 23 },
];

const new_arr = arr.map(function (obj) {
    const rObj = {};
    rObj[obj.name] = obj.age;
    return rObj;
});

console.log(arr);
/* [  { name: 'MITT', age: 28 },
  { name: 'SOPHIE', age: 26 },
  { name: 'PICKLE', age: 23 }] */

console.log(new_arr);
// [ { MITT: 28 }, { SOPHIE: 26 }, { PICKLE: 23 } ]

 

🔍 map 예제 03 | 연봉 10% 인상

---

 

const employee = [
    { name: "MITT", rank: "manager", salary: 6000 },
    { name: "MIEUN", rank: "supervisor", salary: 4800 },
    { name: "JIMIN", rank: "staff", salary: 3100 },
    { name: "SUNWOO", rank: "staff", salary: 3000 },
];

const raisedSalaryList = employee.map((employee) => employee.salary * 1.1);
raisedSalaryList.forEach((salary) => console.log("salary : %d", salary));
/* salary : 6600
salary : 5280
salary : 3410
salary : 3300 */