Categories: JavaScript

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

javascript

자바스크립트 Map, Set

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

Map, Set 특징

Map

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

Set

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

예제

JavaScript

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

JavaScript

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에 있는 값의 개수를 반환합니다.

예제

JavaScript

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

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

JavaScript

Map, Set 활용법

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

Map의 활용 예시

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

JavaScript

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);

JavaScript

설명

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

Set의 활용 예시

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

JavaScript

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"}

JavaScript

설명

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