[JS] 📚 자바스크립트 자료형 Map 🚩 정리

 

자바스크립트는 객체와 배열이라는 강력한 자료구조를 제공합니다.

• ​객체 – 키가 있는 컬렉션을 저장함
• 배열 – 순서가 있는 컬렉션을 저장함

​하지만 현실 세계를 반영하기엔 이 두 자료구조 만으론 부족해서 맵(Map)과 셋(Set)이 등장하게 되었습니다.

---

Map 자료형

​키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다.

다만, 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있습니다.

(객체의 key는 항상 스트링형태로 저장됩니다.)

let map1 = new Map([ // 2차원 key, value 형태의 배열
    ['a',1],
    ['a1',2],
    ['b',3]
])
// map 자료형 : {"a" => 1, "a1" => 2, "b" => 3}

new Map() – 맵을 만듭니다.

map.set(key, value) – key를 이용해 value를 저장합니다.

map.get(key) – key에 해당하는 값을 반환합니다. key가 존재하지 않으면 undefined를 반환합니다.

map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환합니다.

map.delete(key) – key에 해당하는 값을 삭제합니다.

map.clear() – 맵 안의 모든 요소를 제거합니다.

map.size – 요소의 개수를 반환합니다.

 

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

/* 2차원 배열 형태로 한방에 선언 할 수 있어요
let map = new Map([
   ['1', 'str1'],
   [1, 'num1'],
   [true, 'bool1']
])*/

// 객체는 키를 문자형으로 변환한다는 걸 기억하고 계신가요?
// 맵은 키의 타입을 변환시키지 않고 그대로 유지합니다. 따라서 아래의 코드는 출력되는 값이 다릅니다.
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

맵의 key에 중복값이 있으면 나중값으로 적용됩니다. (이는 객체도 마찬가지)

let map1 = new Map([
    ['a',1],
    ['a',2],
    ['b',3]
]) // {"a" => 2, "b" => 3}

let object1 = {
    a:1,
    a:2,
    b:3
} // {a: 2, b: 3}

const errorMessageObj = {
    404 : "페이지가 없습니다",
    500 : "서버 오류입니다",
    401 : "권한이 없습니다"
}

errorMessageObj.404         // unexpected number 에러. key값은 문자열 처리가 되어서 문자열로 접근해야함
errorMessageObj["404"]      // '페이지가 없습니다' 정상접근


const errorMessageMap = new Map([
    [404, "페이지가 없습니다"],
    [500, "서버 오류입니다"],
    [401, "권한이 없습니다"],
])

errorMessageMap.get(404)    // '페이지가 없습니다' 따로 문자열 처리없이, 정상접근

맵은 객체와 달리 키를 문자형으로 변환하지 않습니다. 키엔 자료형 제약이 없습니다.

​map[key]는 Map을 쓰는 바른 방법이 아닙니다.
map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 합니다. 하지만 이 방법은 map을 일반 객체처럼 취급하게 됩니다. 따라서 여러 제약이 생기게 되죠.
map을 사용할 땐 map전용 메서드 set, get 등을 사용해야만 합니다.

 

맵은 키로 객체도 허용합니다.

let john = { name: "John" };

// 고객의 가게 방문 횟수를 세본다고 가정해 봅시다.
let visitsCountMap = new Map();

// john을 맵의 키로 사용하겠습니다.
visitsCountMap.set(john, 123);

alert( visitsCountMap.get(john) ); // 123

​

다음은 guestArr 배열에 이름과 살고있는 도시가 저장되어 있는 자료들이 저장되어 있습니다.

이를 도시별로 묶어 새로 자료를 저장하려고 합니다.

let guestArr = [
    {name:"A", city:"Seoul"},
    {name:"B", city:"Busan"},
    {name:"C", city:"Seoul"},
    {name:"D", city:"Sejong"},
    {name:"E", city:"Busan"},
    {name:"F", city:"Sejong"},
    {name:"G", city:"Dawgeon"},
    {name:"H", city:"Sejong"},
    {name:"I", city:"Dawgeon"},
    {name:"J", city:"Busan"},
    {name:"K", city:"Seoul"},
]

let Oguest = {};
guestArr.forEach(item => {
    if (!Oguest[item.city])   Oguest[item.city] = [];
    Oguest[item.city].push(item);
});

console.log("[Object] : ", Oguest);

 

forEach()를 사용해서 기존 객체 저장법을 사용하면 이렇게 됩니다.

먼저 새로운 객체 Oguest에 해당 도시명 item.city가 없으면 = [] 배열을 새로 넣어줍니다.

그리고 push()를 통해 객체를 넣어줍니다.

​

여기서 key값이 될 item.city는 스트링이 저장된 변수형태 인데,

이를 객체에 받아오기 위해선, Oguest.item.city = [] 형태로 할수는 없습니다. 왜냐하면 객체 key에는 변수가 올수 없고 무조건 스트링만 오기 때문이죠.

그래서 배열형태로 접근해서 인덱스에 넣는 식으로 해야 합니다. Oguest[item.city] = []

---

하지만 Map을 쓰면 좀더 직관적으로 사용할 수 있습니다.

map.has()로 키값을 검사하고, 없으면 map.set()을 통해 key와 value를 넣어줍니다.

그리고 map.get으로 key를 가져와 value에 있는 배열에 push() 해줍니다.

let Mguest = new Map();
guestArr.forEach(item => {
    if (!Mguest.has(item.city))   Mguest.set(item.city, []);
    Mguest.get(item.city).push(item);
});

console.log("[Map] : ", Mguest);

 

* 체이닝

map.set을 호출할 때마다 맵 자신이 반환됩니다.
이를 이용하면 map.set을 '체이닝(chaining)'할 수 있습니다.

map.set('1', 'str1') .set(1, 'num1') .set(true, 'bool1');

---

맵의 요소에 반복 작업하기

​

다음 세 가지 메서드를 사용해 맵의 각 요소에 반복 작업을 할 수 있습니다.

map.keys() – 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환합니다.

map.values() – 각 요소의 값을 모은 이터러블 객체를 반환합니다.

map.entries() – 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환합니다. 이 이터러블 객체는 for..of반복문의 기초로 쓰입니다.

let recipeMap = new Map([
  ['cucumber', 500],
  ['tomatoes', 350],
  ['onion',    50]
]);

// 키(vegetable)를 대상으로 순회합니다.
for (let vegetable of recipeMap.keys()) {
  alert(vegetable); // cucumber, tomatoes, onion
}

// 값(amount)을 대상으로 순회합니다.
for (let amount of recipeMap.values()) {
  alert(amount); // 500, 350, 50
}

// [키, 값] 쌍을 대상으로 순회합니다.
for (let entry of recipeMap) { // recipeMap.entries()와 동일합니다.
  alert(entry); // cucumber,500 ...
}

 

맵은 삽입 순서를 기억합니다. (이터러블 객체)
맵은 값이 삽입된 순서대로 순회를 실시합니다.
객체가 프로퍼티 순서를 기억하지 못하는 것과는 다릅니다.

 

여기에 더하여 맵은 배열과 유사하게 내장 메서드 forEach도 지원합니다.

// 각 (키, 값) 쌍을 대상으로 함수를 실행
recipeMap.forEach( (value, key, map) => {
  alert(`${key}: ${value}`); // cucumber: 500 ...
});

---

객체 -> 맵 으로 바꾸기

평범한 객체를 가지고 맵을 만들고 싶다면 내장 메서드 Object.entries(obj)를 활용해야 합니다.

이 메서드는 객체의 키-값 쌍을 요소([key, value])로 가지는 배열을 반환합니다.

// 그냥 맵 만들기 (각 요소가 [키, 값] 쌍인 배열)
let map = new Map([
  ['1',  'str1'],
  [1,    'num1'],
  [true, 'bool1']
]);


// 객체로 맵 만들기
let obj = {
  name: "John",
  age: 30
};

let map2 = new Map(Object.entries(obj)); // 객체를 2차원의 키:밸류 형태로 만들고 맵으로 변환
                                         // [ ["name","John"], ["age", 30] ]
alert( map2.get('name') ); // John

Object.entries를 사용해 객체 obj를 배열 [ ["name","John"], ["age", 30] ]로 바꾸고, 이 배열을 이용해 새로운 맵을 만들어보았습니다.

​

맵 -> 객체 로 바꾸기

이 반대인 맵을 객체로 바꾸는 방법에 대해 알아보겠습니다.

Object.fromEntries를 사용하면 가능합니다. 이 메서드는 각 요소가 [키, 값] 쌍인 배열을 객체로 바꿔줍니다.

자료가 맵에 저장되어있는데, 서드파티 코드에서 자료를 객체형태로 넘겨받길 원할 때 이 방법을 사용할 수 있습니다.

let map = new Map();
map.set('banana', 1);
map.set('orange', 2);
map.set('meat', 4);

let obj = Object.fromEntries(map.entries()); // 맵을 일반 객체로 변환 (*)
// let obj = Object.fromEntries(map); // .entries()를 생략할 수 있음.
// 맵이 객체가 되었습니다!
// obj = { banana: 1, orange: 2, meat: 4 }

alert(obj.orange); // 2

---

Reference

https://ko.javascript.info/map-set 

https://maxkim-j.github.io/posts/js-map