📒 Map, Set

🧩 Map

메서드	설명
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', 'value1');
map.set(1, 'value2');
map.set(true, 'value3');

console.log(map.get('1')); // value1
console.log(map.get(1)); // value2
console.log(map.get(true)); // value3

 

 

🔁 반복 작업하기

메서드	설명
map.keys()	각 요소의 키를 모은 반복 가능한(iterable) 객체 반환
map.values()	각 요소의 값을 모은 이터러블 객체를 반환
map.entries()	요소의 [key, value]을 한 쌍으로 하는 이터러블 객체를 반환

 

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

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

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

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

 

💡 맵은 삽입된 순서를 기억한다 (이터러블 객체)

• 값이 삽입된 순서대로 순회

 

➡️ Object → Map

Object.entries(obj)를 활용한다.

• 객체의 키-값 쌍을 요소([key, value]) 로 가지는 배열을 반환

let obj = {
   name = "beomsic",
   age = 28
};

let map2 = new Map(Object.entries(obj)); // [["name", "beomsic"], ["age", 28]]

console.log(map2.get('name')); // beomsic

 

 

➡️ Map → Object

Obejct.fromEntries() 사용

• 각 요소가 [key, value] 쌍인 배열을 객체로 바꿔준다.

let map = new Map();
map.set('beomsic', 1);
map.set('beom', 2);
map.set('beomseok', 3);

let obj = Object.fromEntries(map.entries());
// obj = { beomsic: 1, beom: 2, beomseok: 3 }

console.log(obj.beom); // 2

 

🧩 Set

중복을 허용하지 않는 값을 모아놓은 컬렉션

 

메서드	설명
new Set(iterable)	셋을 만든다.  - 이터러블 객체를 전달받으면 그 안의 값을 복사한다.
set.add(value)	값을 추가하고 자신(셋)을 반환
set.delete(value)	값을 제거한다. - 호출 시점에 셋 내에 값이 있어 제거에 성공시 true, 아니면 false를 반환
set.has(value)	셋 내에 값이 존재하면 true, 아니라면 false
set.clear()	셋을 비운다.
set.size	셋에 몇 개의 요소가 있는지 알려준다.

 

🔁 반복 작업하기

 

for..or 나 forEach를 사용하면 셋의 값을 대상으로 반복 작업을 수행할 수 있다.

let set = new Set(["beomsic", "beom", "beomseok"]);

for (let value of set) {
    console.log(value); // beomsic, beom, beomseok
}

set.forEach((value, valueAgain, set) => {
    console.log(value); // beomsic, beom, beomseok
});

 

메서드	설명
set.keys()	셋 내의 모든 값을 포함하는 이터러블 객체를 반환
set.values()	set.keys와 동일한 작업, 맵과의 호환성을 위해 만들어졌다.
set.entries()	셋 내의 각 값을 이용해 만든 [key, value]을 한 쌍으로 하는 이터러블 객체를 반환

 

📕 참고자료

[JS #5] ES6 Map(), Set()

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

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