[modern JS Deep Dive] - 37장 . Set과 Map

유선향·2025년 1월 18일
0

<modern_JS_Deep_Dive>

목록 보기
34/44

Set

Set 객체는 중복되지 않은 유일한 값들의 집합이다. 배열과 유사하지만, 수학적 집합을 구현하기 위한 자료구조라는 차이가 있다.

배열과 Set 객체 차이

  • Set 은 수학적 집합을 구현하기 위한 자료구조로서, 교집합, 합집합, 차집합, 여집합등을 구현할 수 있다.

Set 객체 다루기

생성

  • set 생성자 함수로 생성한다. Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다.
  • Set 생성자 함수는 이터러블을 인수로 전달 받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다.

요소 갯수 확인

  • size 프로퍼티는 setter 함수 없이 getter 함수만 존재하는 접근자 프로퍼티로, size 프로퍼티에 숫자를 할당해서 요소 갯수를 변경 한다던가 할수 없다.

요소 추가

  • add 메서드는 새로운 요소가 추가된 Set 객체를 반환하므로, 연속적으로 add 메서드를 호출할 수 있다.

요소 순회

  • forEach로 순회 가능, 이터러블이기에 for …of 문으로 순회 가능, 스프레드 문법과 배열 디스트럭처링의 대상이 될 수도 있다.
// ✅ Set 객체 생성
const set = new Set([1, 2, 3, 3]); 
console.log(set); // {1, 2, 3} (중복 제거)

// ✅ 프로퍼티 - 요소 갯수 확인
console.log(set.size); // 🔹 size: Set에 저장된 원소 개수 → 3

// ✅ 요소 추가
set.add(4);             // 🔹 add(value): 새로운 요소 추가
set.add(2);             // 중복된 값은 무시됨
console.log(set);       // {1, 2, 3, 4}

// ✅ 요소 존재 확인
console.log(set.has(2)); // 🔹 has(value): 해당 값이 존재하면 true → true
console.log(set.has(3)); // false

// ✅ 요소 삭제
set.delete(3);          // 🔹 delete(value): 해당 요소 제거 // {1, 2, 4}

// ✅ 요소 일괄 삭제
set.clear();            // 🔹 clear(): 모든 요소 제거 -> Set(0) {}

// 🔹 forEach(callback): Set의 각 값 순회
set.forEach((v,v2,set) => console.log('forEach:', v));
v: 현재 순회중인 요소값
v2: 현재 순회중인 요소값
set: 현재 순회중인 Set 객체 자체

// 🔹 keys(), values(), entries(): 이터레이터(iterator) 반환
console.log([...set.keys()]);    // [10, 20, 30]
console.log([...set.values()]);  // [10, 20, 30]
console.log([...set.entries()]); // [[10,10], [20,20], [30,30]]

// 🔹 for...of 구문으로 순회 가능
for (const v of set) {
  console.log('for...of:', v);
}

Set의 집합 연산

// ✅ 두 Set 생성
const setA = new Set([1, 2, 3, 4]);
const setB = new Set([3, 4, 5, 6]);

// ✅ 1. 합집합 (union) → A ∪ B
// 두 집합의 모든 원소를 합치되, 중복 제거
const union = new Set([...setA, ...setB]);
console.log('합집합:', union); // {1, 2, 3, 4, 5, 6}

// ✅ 2. 교집합 (intersection) → A ∩ B
// A의 원소 중 B에도 존재하는 것만
const intersection = new Set([...setA].filter(v => setB.has(v)));
console.log('교집합:', intersection); // {3, 4}

// ✅ 3. 차집합 (difference) → A - B
// A에는 있지만 B에는 없는 원소만
const difference = new Set([...setA].filter(v => !setB.has(v)));
console.log('차집합 (A - B):', difference); // {1, 2}

// ✅ 4. 대칭차집합 (symmetric difference) → (A ∪ B) - (A ∩ B)
// 두 집합 중 하나에만 존재하는 원소들
const symmetricDifference = new Set(
  [...setA, ...setB].filter(v => !(setA.has(v) && setB.has(v)))
);
console.log('대칭차집합:', symmetricDifference); // {1, 2, 5, 6}

// ✅ 5. 부분집합 / 상위집합 확인
const isSubset = [...setA].every(v => setB.has(v));   // A ⊆ B ?
const isSuperset = [...setB].every(v => setA.has(v)); // A ⊇ B ?

console.log('A는 B의 부분집합인가?', isSubset);   // false
console.log('A는 B의 상위집합인가?', isSuperset); // false

Map

Map 객체는 키와 값의 쌍으로 이루어진 컬렉션이다. 객체와 유사하지만 차이가 있다.

Map 과 객체

Map 다루기

Map 생성

  • 생성자 함수로 생성된다, 인수를 전달하지 않으면 빈 Map 객체가 생성된다.
  • Map 생성자 함수는 이터러블을 인수로 전달받아 Map 객체를 생성한다. 이때 인수로 전달되는 이터러블은 키와 값의 쌍으로 이루어진 요소로 구성되어야 한다.
  • 인수로 전달한 이터러블에 중복된 키를 갖는 요소가 존재 하면 값이 덮어씌워진다.
// ✅ Map 객체 생성
const map = new Map([
  ['name', 'Min'],
  ['age', 26],
]);

console.log(map); // Map(2) { 'name' => 'Min', 'age' => 26 }

// ✅ 요소 갯수 확인
console.log(map.size); // 🔹 size: Map의 요소 개수 → 2

// ✅ 요소 추가
map.set('job', 'Frontend Developer');
map.set('age', 27); // 기존 키 age의 값 수정
console.log(map); 
// Map(3) { 'name' => 'Min', 'age' => 27, 'job' => 'Frontend Developer' }

// ✅ 요소 취득
console.log(map.get('name')); // 'Min'

// ✅ 요소 존재 여부 확인
console.log(map.has('job')); // true
console.log(map.has('country')); // false

// ✅ 요소 삭제 - delete(key): 특정 키 삭제
map.delete('job');
console.log(map); 
// Map(2) { 'name' => 'Min', 'age' => 27 }

// ✅ clear(): 모든 요소 제거
// map.clear();
// console.log(map); // Map(0) {}

// ✅ 순회 관련 메서드

// 🔹 keys(): 모든 키 반환 (이터레이터)
console.log([...map.keys()]); // ['name', 'age']

// 🔹 values(): 모든 값 반환 (이터레이터)
console.log([...map.values()]); // ['Min', 27]

// 🔹 entries(): [key, value] 쌍을 이터레이터로 반환
console.log([...map.entries()]); // [['name', 'Min'], ['age', 27]]

// 🔹 forEach(callback): 각 요소 순회
map.forEach((value, key) => {
  console.log(`key: ${key}, value: ${value}`);
});

// 🔹 for...of 순회 (entries와 동일)
for (const [key, value] of map) {
  console.log(`for...of -> ${key}: ${value}`);
}

0개의 댓글