18. JavaScript Keyed Collections: Map, Set, WeakMap, WeakSet | 웹 개발 기초

표현주의 스타일, dall-e

 

JavaScript Keyed Collections

 

01. 서론

1) JavaScript Keyed Collections 소개

JavaScript Keyed Collections는 Map, Set, WeakMap, WeakSet과 같은 컬렉션 객체를 의미합니다. 이 컬렉션들은 데이터를 키-값 쌍이나 고유한 값의 집합으로 관리하는 데 사용되며, 각각 고유한 특징과 사용 사례를 가지고 있습니다.

2) 이 컬렉션들이 중요한 이유

Keyed Collections는 데이터 관리와 메모리 효율성을 높이는 데 중요한 역할을 합니다. 특히, 객체 참조를 관리하고, 데이터의 중복을 방지하며, 효율적인 데이터 접근 및 조작을 가능하게 합니다.

 

02. Map

1) Map의 정의와 역할

Map 객체는 키-값 쌍을 저장하는 데 사용되며, 모든 키와 값은 객체나 원시 값이 될 수 있습니다. 키의 삽입 순서가 유지되며, 중복된 키는 허용되지 않습니다.

2) 주요 메서드와 사용 예제

let map = new Map();

// 데이터 추가: set(key, value)
map.set('name', 'Alice');
map.set('age', 25);

// 데이터 접근: get(key)
console.log(map.get('name')); // 출력: Alice
console.log(map.get('age')); // 출력: 25

// 데이터 존재 여부 확인: has(key)
console.log(map.has('name')); // 출력: true
console.log(map.has('address')); // 출력: false

// 데이터 삭제: delete(key)
map.delete('age');
console.log(map.has('age')); // 출력: false

// 전체 데이터 삭제: clear()
map.clear();
console.log(map.size); // 출력: 0

// Map 크기 확인: size
map.set('name', 'Alice');
map.set('age', 25);
console.log(map.size); // 출력: 2

// Map 순회: for...of
for (let [key, value] of map) {
  console.log(key + ': ' + value);
}
// 출력:
// name: Alice
// age: 25
            

 

03. Set

1) Set의 정의와 역할

Set 객체는 고유한 값들의 집합을 저장하는 데 사용됩니다. 이는 중복된 값이 허용되지 않으며, 모든 값(객체와 원시값)을 저장할 수 있습니다. Set은 값의 존재 여부를 빠르게 확인하고, 삽입된 순서대로 값을 순회할 수 있어 데이터의 무결성을 유지하는 데 유용합니다.

2) 주요 메서드와 사용 예제

let set = new Set();

// 데이터 추가: add(value)
set.add(1);
set.add(5);
set.add(1); // 중복된 값은 무시됨
set.add('hello');

// 데이터 접근: has(value)
console.log(set.has(1)); // 출력: true
console.log(set.has(2)); // 출력: false

// 데이터 삭제: delete(value)
set.delete(5);
console.log(set.has(5)); // 출력: false

// 전체 데이터 삭제: clear()
set.clear();
console.log(set.size); // 출력: 0

// Set 크기 확인: size
set.add(1);
set.add(5);
set.add('hello');
console.log(set.size); // 출력: 3

// Set 순회: for...of
for (let value of set) {
  console.log(value);
}
// 출력:
// 1
// 5
// hello
            

 

04. WeakMap

1) WeakMap의 정의와 역할

WeakMap 객체는 키로 객체만을 사용할 수 있는 키-값 쌍을 저장하는 데 사용됩니다. 이는 참조가 없는 키-값 쌍을 가비지 컬렉션을 통해 자동으로 삭제할 수 있어 메모리 관리에 유리합니다. WeakMap의 키는 반드시 객체여야 하며, 원시값은 사용할 수 없습니다.

2) 주요 메서드와 사용 예제

let weakMap = new WeakMap();

// 객체 키 생성
let obj1 = {};
let obj2 = {};

// 데이터 추가: set(key, value)
weakMap.set(obj1, 'Alice');
weakMap.set(obj2, 25);

// 데이터 접근: get(key)
console.log(weakMap.get(obj1)); // 출력: Alice
console.log(weakMap.get(obj2)); // 출력: 25

// 키 존재 여부 확인: has(key)
console.log(weakMap.has(obj1)); // 출력: true
console.log(weakMap.has({})); // 출력: false (다른 객체)

// 데이터 삭제: delete(key)
weakMap.delete(obj1);
console.log(weakMap.has(obj1)); // 출력: false
            

 

05. WeakSet

1) WeakSet의 정의와 역할

WeakSet 객체는 객체만을 저장할 수 있는 집합을 나타냅니다. 이는 Set과 유사하지만, WeakSet에 저장된 객체는 가비지 컬렉션의 대상이 될 수 있으며, 참조가 없어지면 자동으로 제거됩니다. WeakSet은 주로 객체 참조를 약하게 유지하여 메모리 누수를 방지하고, 객체가 더 이상 필요하지 않을 때 자동으로 정리되는 특징을 가지고 있습니다.

2) 주요 메서드와 사용 예제

let weakSet = new WeakSet();

// 객체 생성
let obj1 = { name: 'Alice' };
let obj2 = { age: 25 };

// 데이터 추가: add(value)
weakSet.add(obj1);
weakSet.add(obj2);

// 데이터 존재 여부 확인: has(value)
console.log(weakSet.has(obj1)); // 출력: true
console.log(weakSet.has({})); // 출력: false (다른 객체)

// 데이터 삭제: delete(value)
weakSet.delete(obj1);
console.log(weakSet.has(obj1)); // 출력: false
            

 

06. Keyed Collections의 실용적 사용 사례

1) 데이터 저장 및 접근

Map과 WeakMap 객체는 키-값 쌍을 저장하고 접근하는 데 유용합니다. 예를 들어, 사용자 정보를 저장하고 빠르게 접근해야 하는 경우 Map 객체를 사용할 수 있습니다.

let userMap = new Map();

// 사용자 정보 저장
userMap.set('user1', { name: 'Alice', age: 25 });
userMap.set('user2', { name: 'Bob', age: 30 });

// 사용자 정보 접근
console.log(userMap.get('user1')); // 출력: { name: 'Alice', age: 25 }
console.log(userMap.get('user2')); // 출력: { name: 'Bob', age: 30 }
            

WeakMap은 주로 객체 참조를 관리하고 메모리 누수를 방지하는 데 사용됩니다. 예를 들어, DOM 요소와 관련된 데이터를 저장하는 경우 WeakMap을 사용할 수 있습니다.

let elementData = new WeakMap();
let element = document.querySelector('#myElement');

// 데이터 저장
elementData.set(element, { clicked: true });

// 데이터 접근
console.log(elementData.get(element)); // 출력: { clicked: true }
            

2) 메모리 관리

WeakSet과 WeakMap 객체는 객체 참조를 약하게 유지하여 메모리 누수를 방지하는 데 유용합니다. 예를 들어, 이벤트 리스너와 관련된 객체를 관리하는 경우 WeakSet을 사용할 수 있습니다.

let listeners = new WeakSet();
let button = document.querySelector('#myButton');

function onClick() {
  console.log('Button clicked');
}

// 이벤트 리스너 추가
button.addEventListener('click', onClick);
listeners.add(onClick);

// 이벤트 리스너 존재 여부 확인
console.log(listeners.has(onClick)); // 출력: true

// 이벤트 리스너 제거 후 메모리 관리
button.removeEventListener('click', onClick);
listeners.delete(onClick);
console.log(listeners.has(onClick)); // 출력: false
            

 

---

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.11 - [Study] - 15. JavaScript 텍스트 포맷팅 | 웹 개발 기초

15. JavaScript 텍스트 포맷팅 | 웹 개발 기초

2024.07.11 - [Study] - 14. JavaScript 숫자와 날짜 | 웹 개발 기초

14. JavaScript 숫자와 날짜 | 웹 개발 기초

2024.07.10 - [Study] - 13. JavaScript 표현식과 연산자 | 웹 개발 기초

13. JavaScript 표현식과 연산자 | 웹 개발 기초

---

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)