<자바스크립트> 맵과 셋

 

1. 맵

* 기본 메서드

 - 맵은 키가 있는 컬랙션을 저장한 '객체'나 순서가 있는 컬랙션을 저장한 '배열'과 다른 좀 더 현실적인 자료구조이다.

 

 - 맵에서의 기본적인 메서드와 프로퍼티는 다음과 같다.

 

 - new Map() : 맵을 만든다.

 - map.set(key, value) : key를 이용하여 value를 저장한다.

 - map.get(key) : key에 해당하는 value를 반환한다.

 - map.has(key) : key가 존재하는지 불리언 값을 반환한다.

 - map.delete(key) : key에 있는 값을 삭제한다.

 - map.clear() : 맵 내의 요소들을 모두 삭제한다.

 - map.size : 요소의 갯수를 반환한다.

 

 - 코드로써 맵을 좀 더 알아보자.

 

let map = new Map();

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

console.log( map.get('1') );  // 문자
console.log( map.get(1) ); // 숫자
console.log ( map.get(true) ); // 불린

alert( map.size ); // 3

 

 - 객체는 키로써 문자형만 갖는다. 그러나 맵은 키에 자료형 제약이 없다.

 

 - 맵은 저장된 배열과 같이 순서를 기억한다.

 

 - 맵은 키로 객체를 허용한다.

 

* 반복 메서드

 - 맵은 세 가지의 메서드로 반복 작업을 돕는다.

 

 - map.keys() - 각 키를 모아서 이터러블(반복 가능한) 객체를 반환한다.

 - map.values() - 각 값을 모아서 이터러블 객체를 반환한다.

 - map.entries() - 각 키,값 쌍을 모아서 이터러블 객체로 반환한다.

 

let userMap = new Map([
  ['HARRY', 1999],
  ['IU', 1993],
  ['SUZY', 1994],
]);

for (let entry of userMap) { // userMap.entries() 와 동일함
  console.log(entry);
}

// ['HARRY', 1999]
// ['IU', 1993]
// ['SUZY', 1994]

 

 - 추가로 맵은 배열과 유사하게 내장 메서드 forEach를 지원한다. 맵.forEach( (value, key, map) => {} ) 와 같이 사용한다.

 

* 맵과 객체

 - 객체를 맵으로 변경할 수 있다. 이 때 Object.entries를 사용한다. 이는 내장메서드이며, 객체의 키와 값의 쌍을 요소로 가지는 배열을 반환한다. 

 

let obj = {
  name: "harry",
  age: 22
};

let map = new Map(Object.entries(obj));

alert( map.get('name') ); // harry

 

 - 위와 반대로 맵을 객체로도 바꿀 수 있다. 이 때에는 Object.fromEntries를 사용한다.

 

let users = Object.fromEntries([
  ['HARRY', 1],
  ['IU', 2],
  ['SUZY', 3]
]);

console.log(users.IU);  // 2

 

2. 셋

* 주요 메서드

 - 셋은 중복을 허용하지 않는 유용한 자료구조이다.

 

 - 주요 메서드들을 알아보자.

 

 - new Set(iterable) : 셋을 만든다. 이터러블 객체를 받아 셋에 넣는다.

 - set.add(value) : 값을 추가하고 셋 자신을 반환한다.

 - set.delete(value) : 값을 제거하고 성공 및 실패 시 각 true, false를 반환한다.

 - set.has(value) : 값이 존재하는지 불린 값을 반환한다.

 - set.clear() : 셋을 비운다.

 - set.size : 셋의 요소의 갯수를 반환한다.

 

 - 셋에 동일한 값이 있으면 add를 아무리 하더라도 무용지물이다.

 

 - 셋 자료구조가 유용하게 쓰이는 방문자를 기록하는 프로그램을 작성해보자. 방문자는 여러 번 방문 하더라도 중복해서 기입할 필요가 없다고 가정한다.

 

let userSet = new Set();

let harry = { name: "HARRY" };
let iu = { name: "IU" };
let suzy = { name: "SUZY" };

userSet.add(harry);
userSet.add(iu);
userSet.add(suzy);
userSet.add(iu);
userSet.add(iu);

console.log( userSet.size ); // 3

for (let user of userSet) {
  console.log(user.name);
}
// HARRY
// IU
// SUZY

 

 - iu가 3 번 add되었음에도 셋의 사이즈는 3이며, IU가 하나만 들어있음을 알 수 있다.

 

* 반복 

 - 셋도 맵과 동일한 반복 메서드가 존재한다. set.keys() , set.values(), set.entries() 모두 맵과 동일하게 동작한다.

 

 - 셋은 for..of와 forEach로 반복작업을 할 수 있다.

 

let set = new Set(["HARRY", "IU", "SUZY"]);
for (let value of set) console.log(value);

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

// HARRY
// IU
// SUZY

// HARRY
// IU
// SUZY

 

 - forEach에서 두 번째 인자로 값이 한번 더 들어가는 이유는 맵과의 호환성 때문이다. 맵이 forEach에 쓰인 콜백이 인수를 세 개 받을 수 있으므로, 맵에서 셋으로, 셋에서 맵으로 교체를 쉽게 하기 위해서이다.

 

 

 

---

 

 

 

참고

 

 

 

모던 자바스크립트 튜토리얼

모던 JavaScript 튜토리얼