JS 3-4. Map, Set

19. Map과 Set 개념과 각각 활용법 설명

---

💞 Set

Set은 JavaScript에서 고유한 값의 집합을 관리하기 위한 객체이다.
배열과 비슷해 보이지만, 중복된 값을 허용하지 않는다는 점이 다르다.
(인덱스X, 중복 값X)

• 중복 제거 : Set에 추가되는 값은 자동으로 중복이 제거된다.
• 순서 유지 : 삽입된 값의 순서를 유지한다.
• 유형 구분 : 원시 값과 참조 값 모두 저장 가능하며, 서로 다른 값으로 취급.

사용 방법

🖥️ javascript

const mySet = new Set();

// 값 추가
mySet.add(1);
mySet.add(5);
mySet.add(1); // 중복된 값은 무시됨
console.log(mySet); // Set(2) {1, 5}

// 값 확인
console.log(mySet.has(1)); // true
console.log(mySet.has(3)); // false

// 값 삭제
mySet.delete(1);
console.log(mySet); // Set(1) {5}

// 크기 확인
console.log(mySet.size); // 1

// Set 순회
mySet.add(10);
mySet.forEach(value => console.log(value)); // 5, 10

활용 예시

1. 중복 제거

🖥️ javascript

const numbers = [1, 2, 3, 3, 4, 5, 5];
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

2. 교집합, 합집합, 차집합 연산

🖥️ javascript

const setA = new Set([1, 2, 3]);
const setB = new Set([3, 4, 5]);

// 교집합
const intersection = new Set([...setA].filter(x => setB.has(x)));
console.log(intersection); // Set(1) {3}

// 합집합
const union = new Set([...setA, ...setB]);
console.log(union); // Set(5) {1, 2, 3, 4, 5}

// 차집합
const difference = new Set([...setA].filter(x => !setB.has(x)));
console.log(difference); // Set(2) {1, 2}

---

💞 Map

Map은 키-값 쌍을 관리하기 위한 객체로, Object와 비슷하지만,
키의 유형과 삽입 순서를 더 엄격하게 관리한다. (중복 키X, 중복 값O)

• 임의의 키 : 문자열뿐만 아니라, 객체, 함수 등 모든 데이터 유형을 키로 사용.
• 삽입 순서 유지 : 삽입된 순서대로 값 저장.
• 크기 관리 : size 속성으로 항목의 개수를 쉽게 확인 가능.

사용 방법

🖥️javascript

const myMap = new Map();

// 값 추가
myMap.set('key1', 'value1');
myMap.set(2, 'value2');
myMap.set({}, 'value3'); // 객체를 키로 사용

// 값 읽기
console.log(myMap.get('key1')); // value1
console.log(myMap.get(2)); // value2

// 값 확인
console.log(myMap.has('key1')); // true
console.log(myMap.has('key2')); // false

// 값 삭제
myMap.delete(2);
console.log(myMap); // Map(2) {'key1' => 'value1', {} => 'value3'}

// 크기 확인
console.log(myMap.size); // 2

// Map 순회
myMap.forEach((value, key) => console.log(`${key}: ${value}`));
// 출력: key1: value1, [object Object]: value3

활용 예시

1. 데이터 저장 및 검색

🖥️ javascript

const userRoles = new Map();
userRoles.set('admin', { canEdit: true, canDelete: true });
userRoles.set('user', { canEdit: false, canDelete: false });

console.log(userRoles.get('admin').canEdit); // true

2. 키로 객체 사용

🖥️ javascript

const objKey = { id: 1 };
const map = new Map();
map.set(objKey, 'Object Value');

console.log(map.get(objKey)); // Object Value

---

💞 Set vs Map