JS: Map,Set

Map

ES6에서 도입되었으며,키가 있는 데이터를 저장한다는 점에서 객체와 유사하다.

하지만, 차이점들이 존재한다.

1. 키에 다양한 자료형을 허용한다.

숫자,객체 까지 키 값으로 넣을 수 있다.

2. map.size – 요소의 개수를 반환할 수 있다.

객체의 경우에는 요소개 갯수를 카운팅하기 위해 Object.keys().length를 사용해야한다.

3. new Map() – 맵을 만든다.
4. map.set(key, value) – key를 이용해 value를 저장,
5. map.get(key) key에 해당하는 값을 반환
6. map.has(key)– key가 존재하면 true, 존재하지 않으면 false를 반환
7. map.delete(key)– key에 해당하는 값을 삭제
8. map.clear() – 맵 안의 모든 요소를 제거

obejct[key], object.key로 접근하는 객체와 다르다.
map을 사용할 땐 map전용 메서드 set, get 등을 사용해야한다.

(c++의 Map이라고 생각하면 편할 듯 하다.)

예시

let map = new Map();

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

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

alert( map.size ); // 3

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 ...
}

Set

ES6에서 도입되었으며,중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션이다.

1. new Set(iterable) – 이터러블 객체를 전달받으면(대개 배열을 전달받음) 그 안의 값을 복사한다.
2. set.add(value) – 값을 추가하고 셋 자신을 반환
   3.set.delete(value)– 값을 제거합니다. 호출 시점에 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환
3. set.has(value)–값이 존재하면 true, 존재하지 않으면 false를 반환
4. set.size – 셋에 몇 개의 값이 있는지 카운팅
5. set.clear() – 셋 안의 모든 요소를 제거

###예시

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있습니다.
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// 셋에는 유일무이한 값만 저장됩니다.
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // // John, Pete, Mary 순으로 출력됩니다.
}
let set = new Set(["oranges", "apples", "bananas"]);

for (let value of set) alert(value);

// forEach를 사용해도 동일하게 동작합니다.
set.forEach((value, valueAgain, set) => {
  alert(value);
});

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