---

Set

자료형에 관계 없이 원시 값, 객체 참조 모두 유일한 값으로 저장하는 자료구조

앞서 살펴본 자료구조 Array(배열)는 인덱스를 포함하여 순서를 중요시 여기는 자료구조이다.

Array는 개개인의 자료들이 별도로 저장되어 있어 데이터의 중복을 허용한다.

Set은 배열과 유사한 자료구조이며 Set객체는 값 콜렉션으로, 삽입 순서대로 요소를 순회할 수 있으며 하나의 Set 내 값은 한 번만 나타날 수 있다.

즉, 자료구조 Set은 데이터의 순서가 중요하지 않으며 중복을 허용하지 않는 자료구조의 한 종류이다.

Set 사용방법

• set 선언

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

• size확인

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

• 요소 존재유무 확인

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(5)); // false

• 요소 순회

const set = new Set([1, 2, 3]);

set.forEach((value) => console.log(value)); // 1 2 3

for(const value of set.values()) {
  console.log(value); // 1 2 3 
}

• 요소 추가, 삭제

// 추가
const set1 = new Set([1, 2, 3]);

set1.add(4);
console.log(set1); // Set(4) { 1, 2, 3, 4 }
// set은 중복허용 X
set1.add(4);
console.log(set1); // Set(4) { 1, 2, 3, 4 }

// 삭제
const set2 = new Set([1, 2, 3]);

set2.delete(1);
console.log(set2); // Set(2) { 2, 3 }

set2.clear();
console.log(set2); // Set(0) {}

• Object Set

const obj1 = { name: 'apple', price: 8 };
const obj2 = { name: 'banana', price: 5 };
const objs = new Set([obj1, obj2]);

console.log(objs); // Set(2) { { name: 'apple', price: 8 }, { name: 'banana', price: 5 } }

---

Map

키-값 쌍을 보유하고 키의 원래 삽입 순서를 기억하는 자료구조

Map 객체는 키-값 쌍(key, value)로 이루어진 자료구조로 모든 값(객체 및 기본 값 모두)은 키 또는 값으로 사용할 수 있다.

앞서 살펴본 자료구조 Set과 동일하게 데이터의 순서는 중요하지 않다.

하지만 Map에 사용되는 key는 중복되지 않는 유일한 키값이어야 한다. 하지만 key가 중복되지 않고 value만 중복된다면 중복이 가능하다.

Map은 객체와 유사하기 때문에 map, object는 동일하게 사용된다.

Map 사용방법

• Map 선언

const map = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

console.log(map); // Map(2) { 'key1' => 'apple', 'key2' => 'banana' }

• size확인

const map = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

console.log(map.size); // 2

• 요소 존재유무 확인

const map = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

// key값으로 확인
console.log(map.has()); // false
console.log(map.has('key1')); // true
console.log(map.has('ket6')); // false

• 요소 순회

const map = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

map.forEach((value, key) => console.log(key, value)); // key1 apple, key2 banana

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

• 요소 검색

const map = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

console.log(map.get('key1')); // apple
console.log(map.get('key2')); // banana
console.log(map.get('key7')); // undefined

• 요소 추가, 삭제

// 추가
const map1 = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

map1.set('key3', 'orange');
console.log(map1); // Map(3) { 'key1' => 'apple', 'key2' => 'banana', 'key3' => 'orange' }

// 삭제
const map2 = new Map([
  ['key1', 'apple'],
  ['key2', 'banana'],
]);

map2.delete('key2');
console.log(map2); // Map(1) { 'key1' => 'apple' }

map2.clear();
console.log(map2); // Map(0) {}

Map, Object의 차이점

Map은 사용할 수 있는 함수가 많지만 Object는 없다.

또한 Object는 key에 동적으로 접근이 가능하지만, Map은 불가능하다.

const key = { name: 'milk', price: 10 };
const milk = { name: 'milk', price: 10, description: '맛있는 우유' };

const obj = {
  [key]: milk,
};
console.log(obj[key]); // { name: 'milk', price: 10, description: '맛있는 우유' }

const map2 = new Map([[key, milk]]);
console.log(map2[key]); // undefined

---

참고 자료

Set - JavaScript | MDN
Map - JavaScript | MDN
모던 자바스크립트 Deep Dive
모던 JavaScript 튜토리얼