49. 자바스크립트 Set과 Map (Set and Map)

Set과 Map (Set and Map)

자바스크립트에서 Set과 Map은 ES6에서 도입된 새로운 데이터 구조다. 중복 없는 값과 키-값 쌍을 효율적으로 관리한다. Set과 Map의 개념, 사용 방법, 활용 사례를 예제로 확인해보자.

이들은 배열이나 객체와 다른 독특한 특징을 제공한다.

Set이란 무엇인가?

Set은 중복되지 않는 값의 집합이다. 배열과 비슷하지만 값의 유일성을 보장한다. 기본적인 예제를 보자:

const set = new Set();
set.add(1);
set.add(2);
set.add(1); // 중복 무시
console.log(set); // Set {1, 2}

Set은 값만 저장하며 순서를 유지한다.

Map이란 무엇인가?

Map은 키-값 쌍을 저장하는 컬렉션이다. 객체와 비슷하지만 키로 모든 타입을 사용할 수 있다. 예제를 보자:

const map = new Map();
map.set("name", "철수");
map.set(42, "숫자");
console.log(map); // Map {"name" => "철수", 42 => "숫자"}

Map은 객체와 달리 키로 객체도 사용할 수 있다.

Set과 Map의 주요 메서드

Set과 Map의 주요 메서드를 예제로 확인해보자.

1. Set 메서드

- add: 값 추가

- has: 값 존재 여부 확인

- delete: 값 삭제

const set2 = new Set([1, 2, 3]);
set2.add(4);
console.log(set2.has(2)); // true
set2.delete(3);
console.log(set2); // Set {1, 2, 4}

2. Map 메서드

- set: 키-값 쌍 추가

- get: 값 조회

- has: 키 존재 여부 확인

const map2 = new Map();
const keyObj = {};
map2.set(keyObj, "객체 키");
console.log(map2.get(keyObj)); // "객체 키"
console.log(map2.has(keyObj)); // true

Set과 Map의 동작 방식

Set과 Map은 일반 배열이나 객체와 다른 동작을 보인다. 예제로 확인해보자.

1. Set의 중복 제거

중복 값을 자동으로 제거한다:

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

2. Map의 키 타입 유연성

객체와 달리 다양한 키를 허용한다:

const map3 = new Map();
const funcKey = function() {};
map3.set(funcKey, "함수 키");
console.log(map3.get(funcKey)); // "함수 키"

사용 사례

Set과 Map을 활용한 몇 가지 예제를 확인해보자.

1. 중복 제거 (Set)

배열에서 고유한 값만 추출한다:

const duplicates = ["a", "b", "a", "c"];
const uniqueSet = new Set(duplicates);
console.log([...uniqueSet]); // ["a", "b", "c"]

2. 객체 속성 관리 (Map)

객체를 키로 사용해 데이터를 관리한다:

const userMap = new Map();
const user1 = { "id": 1 };
const user2 = { "id": 2 };
userMap.set(user1, "철수");
userMap.set(user2, "영희");
console.log(userMap.get(user1)); // "철수"

3. 반복 처리

Set과 Map은 반복이 용이하다:

const set3 = new Set([1, 2, 3]);
for (let value of set3) {
    console.log(value); // 1, 2, 3
}
const map4 = new Map([["a", 1], ["b", 2]]);
for (let [key, value] of map4) {
    console.log(`${key}: ${value}`); // "a: 1", "b: 2"
}

성능과 한계

장점

- 효율성: 중복 제거(Set)와 키-값 관리(Map)가 빠르다.

- 유연성: Map은 객체 키를 허용한다.

한계

- 메모리: 일반 객체보다 더 많은 메모리를 사용할 수 있다.

- 단순성 부족: 간단한 경우 배열이나 객체가 더 적합할 수 있다.

WeakSet과 WeakMap은 메모리 관리를 개선한 대안이다.

마무리

Set과 Map은 자바스크립트에서 데이터를 관리하는 새로운 방법이다. 주요 메서드와 활용 사례를 예제로 다뤘다.