JavaScript | 자료구조 - Map & Set

🔁 맵(map)

⇨ 키가 있는 데이터를 저장한다는 점이 객체(object)와 유사하다.
⇨ 객체는 키값으로 문자열만 사용가능하지만, 맵은 키에 다양한 자료형을 허용한다.
⇨ key-value의 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 컬렉션이다.
⇨ 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

주요 메서드 및 프로퍼티

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

const map = new Map([
  ['key1', 1],
  ['key2', 2],
]);
console.log(map); //Map(2) { 'key1' => 1, 'key2' => 2 }

//사이즈 확인
console.log(map.size);

//존재하는지 확인
console.log(map.has('key1')); //true
console.log(map.has('key')); //false

//찾기
console.log(map.get('key1')); //1
console.log(map.get('key')); //undefined\

//추가
map.set('key3', 3);
console.log(map); //Map(3) { 'key1' => 1, 'key2' => 2, 'key3' => 3 }

//삭제
map.delete('key3');
console.log(map); //Map(2) { 'key1' => 1, 'key2' => 2 }

//전부 삭제
map.clear();
console.log(map); //Map(0) {}

✅ map 반복 작업

• 맵은 배열과 유사하게 forEach도 지원한다.

//순회
const map = new Map([
  ['key1', 1],
  ['key2', 2],
]);

map.forEach((value, key) => console.log(key, value));

console.log(map.keys()); //[Map Iterator] { 'key1', 'key2' }
console.log(map.values()); //[Map Iterator] { 1, 2 }
console.log(map.entries()); //[Map Entries] { [ 'key1', 1 ], [ 'key2', 2 ] }

• map.keys() : 각 요소의 키를 모은 반복 가능한(iterable, 이터러블) 객체를 반환한다.
• map.values() : 각 요소의 값을 모은 이터러블 객체를 반환한다.
• map.entries() : 요소의 [키, 값]을 한 쌍으로 하는 이터러블 객체를 반환한다. 이 이터러블 객체는 for..of반복문의 기초로 쓰인다.
• forEach(callFuc(value, key, map)) : 배열과 유사하게 내장 메서드인 forEach 반복문을 지원한다.

🔁 셋(set)

⇨ 중복을 허용하지 않는 값을 모아놓은 특별한 컬렉션(집합체)
⇨ 키가 없는 값을 저장한다는 점에서 배열(array)과 유사

주요 메서드

• new Set(iterable) : set 생성 (이터러블 객체를 전달 받으면 그 안의 값을 복사 해 set에 넣어준다.
• set.add(value) : 값을 추가하고 set 자신을 반환한다.
• set.delete(value) : 값을 제거, 성공하면 true, 아니면 false를 반환한다.
• set.has(value) : set 내에 값이 존재하면 true, 아니면 false를 반환한다.
• set.clear() : set을 비운다.
• set.size : set에 몇 개의 값이 있는지 카운트

// Set
const set = new Set([1, 2]);
console.log(set); //Set(2) {1, 2}

// 사이즈 확인
console.log(set.size); //2

// 존재하는지 확인
console.log(set.has(2)); //true
console.log(set.has(7)); //false

// 추가
set.add(8);
console.log(set); //Set(3) { 1, 2, 8 }
set.add(8);
console.log(set); //중복된 건 무시 → Set(3) { 1, 2, 8 }

// 삭제
set.delete(8);
console.log(set); //Set(2) { 1, 2}

// 전부 삭제
set.clear();
console.log(set);

✅ Set 반복 작업

• for..of 또는 forEach를 사용

//반복 순회
const set = new Set(['sed', 'happy', 'fun']);

set.forEach((item) => console.log(item));

// forEach를 사용해도 동일하게 동작합니다.
for (const value of set.values()) {
  console.log(value);
}

• set.keys() : set 내의 모든 값을 포함하는 이터러블 객체를 반환한다.
• set.values() : set.keys와 동일한 작업.(맵과의 호환성)
• set.entries() : 셋 내의 각 값을 이용해 만든 [value, value] 배열을 포함하는 이터러블 객체를 반환(맵과의 호환성)

참고 및 출저
map - MDN
set - MDN
map-set - javascript.info
[ES6+] Map(), Set() 객체의 특징과 사용법 - 썸머워즈