JavaScript 자바스크립트 Map, Set 특징과 사용법

자바스크립트 Map, Set

자바스크립트의 Map은 키-값 쌍을 저장하는 컬렉션으로, 어떠한 타입의 키(객체, 함수, 원시 타입 등)도 사용할 수 있으며, 삽입 순서를 유지합니다. 각 키는 유일하며 set, get, delete 등의 메소드로 데이터를 관리합니다. 반면, Set은 중복 없는 유일한 값을 저장하는 컬렉션으로, 주로 데이터의 존재 여부를 빠르게 확인할 때 사용됩니다. Set은 add, has, delete 메소드를 통해 요소를 추가하거나 검사, 제거할 수 있으며, 삽입된 순서대로 요소를 저장합니다.

Map, Set 특징

Map

1. 키-값 쌍을 저장: Map 객체는 키-값 쌍을 저장합니다. 키와 값은 어떠한 타입이든 될 수 있습니다.
2. 키의 유일성: 각 키는 Map 내에서 유일합니다. 같은 키에 다른 값을 할당하면 이전 값이 대체됩니다.
3. 순서 보장: Map 객체는 삽입된 순서대로 키-값 쌍을 순회합니다. 이는 일반 객체(Object)와는 다른 특성입니다.
4. 직접적인 요소 접근: Map은 .get(), .set(), .has(), .delete() 메서드를 통해 요소에 직접적으로 접근할 수 있습니다.
5. 크기 확인 가능: .size 속성을 사용하여 Map에 저장된 요소의 개수를 알 수 있습니다.
6. 이터러블 객체: Map은 이터러블(iterable) 객체이므로 for…of 루프나 .forEach() 메서드를 사용하여 순회할 수 있습니다.
7. 키 타입의 다양성: 키로 객체, 함수, 원시 타입 등 어떠한 타입도 사용할 수 있습니다.

Set

1. 값의 집합을 저장: Set 객체는 유일한 값들의 집합을 저장합니다. 각 값은 Set 내에서 한 번만 나타납니다.
2. 값의 유일성: 값의 중복을 허용하지 않습니다. 같은 값을 추가하려고 하면 이전 값에 덮어쓰지 않고 무시됩니다.
3. 순서 보장: Set 역시 삽입된 순서대로 값을 순회합니다.
4. 직접적인 요소 접근: .add(), .has(), .delete() 메서드를 사용하여 요소를 관리할 수 있습니다.
5. 크기 확인 가능: .size 속성을 통해 Set에 저장된 요소의 개수를 확인할 수 있습니다.
6. 이터러블 객체: Set 또한 이터러블 객체이므로 for…of 루프나 .forEach() 메서드를 사용하여 순회할 수 있습니다.
7. 값 타입의 다양성: Set에는 원시 타입 또는 객체 참조 모두를 값으로 저장할 수 있습니다.

Map의 개념과 기본 사용법

자바스크립트의 Map 객체는 키-값 쌍을 저장하는 컬렉션입니다. Object와 비슷하지만, 몇 가지 중요한 차이점이 있습니다. 가장 중요한 차이점은 Map은 키로 어떤 타입의 값이든 사용할 수 있다는 점입니다. 즉, 객체, 기본 타입 등 모든 것을 키로 사용할 수 있습니다.

기본 메소드

• new Map(): 새로운 Map을 생성합니다.
• map.set(key, value): 키-값 쌍을 Map에 추가합니다.
• map.get(key): 지정된 키에 해당하는 값을 반환합니다.
• map.has(key): Map에 특정 키가 있는지 여부를 반환합니다.
• map.delete(key): 지정된 키의 요소를 Map에서 제거합니다.
• map.clear(): Map의 모든 요소를 제거합니다.
• map.size: Map에 있는 요소의 개수를 반환합니다.

예제

let map = new Map();
map.set('apple', 'green');
map.set(1, 'number one');

console.log(map.get('apple')); // 'green'
console.log(map.has('apple')); // true
console.log(map.size); // 2

Set의 개념과 기본 사용법

Set 객체는 중복을 허용하지 않는 값의 집합입니다. 즉, 어떤 값이 Set에 이미 존재한다면, 그 값은 Set에 다시 추가될 수 없습니다. 이는 특히 중복된 요소를 제거하고자 할 때 유용합니다.

기본 메소드

• new Set(): 새로운 Set을 생성합니다.
• set.add(value): Set에 값을 추가합니다.
• set.has(value): Set에 특정 값이 있는지 여부를 반환합니다.
• set.delete(value): 지정된 값을 Set에서 제거합니다.
• set.clear(): Set의 모든 값을 제거합니다.
• set.size: Set에 있는 값의 개수를 반환합니다.

예제

let set = new Set();
set.add(1);
set.add(5);
set.add('apple');

console.log(set.has(1)); // true
console.log(set.size); // 3

Map, Set 활용법

• Map: 데이터를 키와 값의 쌍으로 저장해야 할 때 유용합니다. 특히 동적으로 키를 할당해야 하는 경우, Object 대신 Map을 사용하는 것이 좋습니다.
• Set: 중복을 제거하거나, 유일한 값을 저장해야 할 때 사용합니다. 예를 들어, 사용자의 고유 ID 목록을 저장할 때 Set을 사용하면 편리합니다.

Map의 활용 예시

상품과 해당 상품의 재고 수량을 관리하는 경우

let inventory = new Map();

inventory.set("사과", 10);
inventory.set("바나나", 5);
inventory.set("오렌지", 8);

function updateInventory(product, quantity) {
    if (inventory.has(product)) {
        inventory.set(product, inventory.get(product) + quantity);
    } else {
        inventory.set(product, quantity);
    }
}

updateInventory("사과", 5);
updateInventory("키위", 12);

console.log(inventory);

설명

• Map 객체 inventory는 상품명을 키로, 재고 수량을 값으로 저장합니다.
• updateInventory 함수는 상품의 재고를 업데이트합니다. Map의 has 메서드를 사용해 해당 상품이 이미 존재하는지 확인하고, set 메서드로 재고를 업데이트합니다.
• 이 예시에서는 동적으로 상품명을 키로 사용하여 유연하게 데이터를 관리할 수 있습니다.

Set의 활용 예시

웹사이트에 로그인한 사용자의 고유 ID를 추적하는 경우

let loggedInUsers = new Set();

function logIn(userId) {
    loggedInUsers.add(userId);
}

function logOut(userId) {
    loggedInUsers.delete(userId);
}

logIn("user123");
logIn("user456");
logIn("user123"); // 중복 로그인 시도는 무시됩니다.

console.log(loggedInUsers); // {"user123", "user456"}

설명

• Set 객체 loggedInUsers는 로그인한 사용자의 ID를 저장합니다.
• logIn 함수는 사용자 ID를 Set에 추가합니다. 만약 동일한 사용자가 다시 로그인하려고 해도, Set은 중복을 허용하지 않으므로 중복된 ID는 무시됩니다.
• logOut 함수는 사용자 ID를 Set에서 제거합니다.
• 이 예시에서 Set을 사용함으로써 중복된 사용자 ID의 관리를 효율적으로 할 수 있습니다.

결론

Map과 Set은 자바스크립트에서 데이터를 다루는 데 매우 유용한 구조입니다. Map은 유연한 키-값 쌍 저장 방식을 제공하고, Set은 중복 없는 값의 집합을 관리하는 데 이상적입니다. 이 두 구조를 적절히 활용하면 보다 효율적이고 깔끔한 코드 작성이 가능합니다.