[JS] Set, Map

꾸준히 성장하는 Daisy의 기록🏃‍♀️·2021년 1월 16일

코쿼 CS10 미션을 진행하며 복잡한 코드를 간단하게 바꿔주는 ES6 개념들을 알게 되었는데, 그 중에 하나가 Set과 Map이다. Set과 Map은 열, 객체를 유니크 한 값을 가진 컬렉션으로 만들고 싶을 때 아주 유용하게 사용할 수 있는 개념이다.

📍 Array : 순서가 있는 컬렉션을 저장 (Key 없음) //Set, WeakSet
📍 Object : key가 있는 컬렉션을 저장 (순서 없음) //Map,WeakMap

✅Set

Set은 중복을 허용하지 않는 value들이 key 없이 저장된다.

Set은 value들로 이루어진 집합.
모든 type을 저장할 수 있음
Array와 달리 같은 value를 중복해서 가질 수 없고 이미 있는 값을 새로 Add 할 수 없음.
Set은 index가 없기 때문에 index로 value 접근 불가

let mySet = new Set();
mySet.add("A");
mySet.add("B");
mySet.add("A");
console.log("mySet")//"A" "B"

✅Map

Map은 key가 있는 value을 저장하고 iterable하다는 점에서 객체와 유사함.
Map은 객체와 달리 객체 자체를 key로 사용할 수 있음.
Map은 값이 삽입된 순서대로 순회한다. Map은 객체가 property 순서를 기억하지 못하는 것과 달리 값의 삽입 순서를 기억함.

let john = { name: "John" };

let visitsCountObj = {}; 

visitsCountObj[john] = 123;

// 원하는 값(123)을 얻으려면 아래와 같이 키가 들어갈 자리에 `object Object`를 써줘야합니다.
alert( visitsCountObj["[object Object]"] ); // 123

Map은 Key가 있는 컬렉션이지만, 객체처럼 map[key]로 value에 접근하면 안 된다.
map[key] = 2로 값을 설정할 수 있으나 이 방법은 Map을 일반 객체처럼 취급하게 되기 때문에 여러 제약이 생기게 된다. 따라서 Map을 사용할 땐 Map전용 메서드 set, get 등을 사용해야 한다.

📌요약

Set vs Map

차이	Set	Map
유사 형태	Array	Object
길이 확인	set.size	map.size
중복 허용	X	X
순서	O	O
구성	value	[key,value]
iterable	O	O

Set, Map 메서드

Map 메서드

new Map() : 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 안의 모든 요소를 삭제한다.
map.size : 요소의 개수를 반환한다.

Set 메서드

new Set(iterable) : Set을 만든다.
set.add(value) : 값을 추가하고 Set 자신을 반환한다.
set.delete(value) : 값을 제거합니다. 호출 시점에 Set 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환한다.
set.has(value) : Set 내에 값이 존재하면 true, 아니면 false를 반환한다.
set.clear() : Set 안의 모든 요소를 삭제한다.
set.size : 요소의 개수를 반환한다.

Set, Map 순회하기

Set/Map.keys() : 모든 요소를 포함하는 iterable Object를 반환한다.
Set/Map.values() : 각 요소의 value를 모은 iterable Object를 반환한다.
Set/Map.entries() : 요소의 [key, value]을 한 쌍으로 하는 iterable Object를 반환한다.(for..of 반복문의 기초로 쓰임)

let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) console.log(value);
//위 아래는 동일하게 작동
set.forEach((value, valueAgain, set) => {
  console.log(value);
});
//set.forEach에서 value를 두 번 받는 것은 map과의 호환성을 위함

🤔WeakSet, WeakMap ?

WeakSet, WeakMap 모두 참조를 가지고 있는 '객체'만 저장 가능하다.
참조를 가진 객체를 저장하기에 참조를 모니터링 하며 객체가 null로 되거나 필요가 없어지면 Garbage collection 되기 때문에 사용하지 않는 참조는 모두 삭제된다.
(Weak Set 조회시 Garbage collection 대상인 요소도 조회되지만 has로 조회시 False가 반환됨)

WeakSet

객체 형태를 중복 없이 저장할 때 유용하다.

let arr = [1,2,3,4];
let arr2 = [5,6,7,8];
let obj = {arr, arr2};
let weakSet = new WeakSet();

weakSet.add(arr);
weakSet.add(arr2);
weakSet.add(obj);

arr = null;

console.log(weakSet); // WeakSet {Array(4), Array(4), {…}}
console.log(weakSet.has(arr), weakSet.has(arr2)); //false true