JavaScript Map과 Set 이란?

• JavaScript에서 객체(object)와 배열(array)을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있다.
• 그럼에도 불구하고 여전히 현실세계의 여러가지 문제들을 ‘프로그래밍’적으로 반영하기엔 많이 부족하다.
• Map과 Set은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있다.

Map과 Set의 목적

• 데이터 구성, 검색, 사용을 효율적으로 처리 하고,
  기존의 객체 또는 배열보다 빠르고 효율적으로 처리 하는것이 목적이다.

Map

• key / Value
• key에 어떤 데이터 타입(유형)도 다 들어올 수있다.
• Map은 key가 정렬된 순서로 저장하기 때문이다.

기능

• 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 – 요소의 개수를 반환한다.

Map 생성 및 사용

// Map() 생성자를 사용
const myMap = new Map();

// Map에 값을 추가하려면 set() 메소드를 사용
myMap.set('key', 'value');

// Map에서 값을 검색하려면 get() 메소드를 사용
console.log(myMap.get('key'));   // 'value' 출력

Map의 반복

• Map에서는 keys(), values(), entries() 메소드를 사용하여 키, 값 및 키-값 쌍을 반복할 수 있다.

For …of 반복문

• for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문이다.
  for of 구문을 사용하기 위해선 컬렉션 객체가 [Symbol.*iterator] 속성을 가지고 있어야만 한다(직접 명시 가능).

*Iterator

• iterator는 반복자라는 말이다.
  요소 하나하나를 반복할 수 있도록 배열 또는 객체와 비슷한 형태로 열거되어있는 자료구조라고 이해하자.

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

console.log(myMap.keys()); // [Map iteratir] {'one', 'two', 'three'}  출력

for (const key of myMap.keys()) {
  console.log(key);
}  // one
      two
      three   출력
      
console.log(myMap.values()); // [Map iteratir] {1, 2, 3}  출력

for (const value of myMap.values()) {
  console.log(value);
}  // 1
      2
      3   출력
      
console.log(myMap.entries()); // [Map Entries] {['one', 1], ['two', 2], ['three', 3]}  출력

for (const value of myMap.entries()) {
  console.log(entries);
}  // ['one', 1]
      ['two', 2]
      ['three', 3]   출력

위의 예시 코드에서 myMap.keys()으로 쓸 수 있는 이유는 myMap.key()가 반환하는 값이 iterator이기 때문이다.

Map의 크기 및 존재 여부 확인

• Map의 크기를 확인하려면 size 속성을 사용한다.

// Map의 사이즈(길이)
console.log(myMap.size); // 3 출력

• 특정 키가 Map에 존재하는지 여부를 확인하려면 has() 메소드를 사용한다.

// key 기반 검색
console.log(myMap.has('two')); // true 출력

Set

• Set은 고유한 값을 저장하는 자료 구조다.
• Set은 값만 저장하며, 키를 저장하지 않는다.
• Set은 값이 중복되지 않는 유일한 요소로만 구성된다.

Set이 수행할수있는 작업

1. 값 추가 및 검색
2. 값 삭제
3. 모든 값 제거
4. Set 크기 및 존재 여부 확인

Set 생성 및 사용

• 새로운 Set을 만들려면 Set() 생성자를 사용한다.

const mySet = new Set();

• Set에 값을 추가하려면 add() 메소드를 사용한다.

mySet.add('value1');   // value1 출력
mySet.add('value2');   // value2 출력

• Set에서 값을 검색하려면 has() 메소드를 사용한다.

console.log(mySet.has('value1')); // true 출력
console.log(mySet.has('value2')); // true 출력
console.log(mySet.has('value3')); // false 출력

Set의 반복

-Set은 values() 메소드를 사용하여 값을 반복할 수 있다.

const mySet = new Set();
mySet.add('value1');
mySet.add('value2');
mySet.add('value3');
mySet.add('value5');
mySet.add('value8');

// Iterator
for (const value of mySet.values()) {
  console.log(value);
}  // value1
      value2
      value3
      value5
      value8  출력

Set의 크기 및 존재 여부 확인

• Set의 크기를 확인하려면 size 속성을 사용한다.

console.log(mySet.size); // 3 출력

• 특정 값을 Set에서 검색하여 존재하는지 여부를 확인하려면 has() 메소드를 사용한다.

console.log(mySet.has('value2')); // true 출력