반응형
7. 새로 추가된 빌트인 객체들 (Map, Set 등)
새로운 빌트인 객체란 무엇인가?
ES6에서는 기존의 객체(Object)와 배열(Array) 외에 새로운 자료 구조인 Map
과 Set
을 도입했습니다. 이들은 각각 키-값 쌍과 고유한 값의 집합을 관리하는 데 유용합니다.
Map 객체
Map
객체는 키-값 쌍을 저장하며, 모든 데이터 유형을 키로 사용할 수 있습니다.
1. Map 생성
let map = new Map();
2. 요소 추가
map.set('name', 'Alice');
map.set('age', 25);
console.log(map); // 출력: Map(2) {"name" => "Alice", "age" => 25}
3. 요소 접근
console.log(map.get('name')); // 출력: Alice
console.log(map.get('age')); // 출력: 25
4. 요소 존재 확인
console.log(map.has('name')); // 출력: true
console.log(map.has('gender')); // 출력: false
5. 요소 삭제
map.delete('age');
console.log(map); // 출력: Map(1) {"name" => "Alice"}
6. 요소 개수 확인
console.log(map.size); // 출력: 1
7. 모든 요소 제거
map.clear();
console.log(map.size); // 출력: 0
8. Map 순회
map.set('name', 'Alice');
map.set('age', 25);
for (let [key, value] of map) {
console.log(`${key}: ${value}`);
}
// 출력:
// name: Alice
// age: 25
Set 객체
Set
객체는 고유한 값들의 집합을 저장합니다. 동일한 값이 중복되지 않도록 관리합니다.
1. Set 생성
let set = new Set();
2. 요소 추가
set.add(1);
set.add(2);
set.add(2); // 중복된 값은 추가되지 않음
console.log(set); // 출력: Set(2) {1, 2}
3. 요소 존재 확인
console.log(set.has(1)); // 출력: true
console.log(set.has(3)); // 출력: false
4. 요소 삭제
set.delete(1);
console.log(set); // 출력: Set(1) {2}
5. 요소 개수 확인
console.log(set.size); // 출력: 1
6. 모든 요소 제거
set.clear();
console.log(set.size); // 출력: 0
7. Set 순회
set.add('Apple');
set.add('Banana');
set.add('Cherry');
for (let item of set) {
console.log(item);
}
// 출력:
// Apple
// Banana
// Cherry
WeakMap과 WeakSet
WeakMap
과 WeakSet
은 가비지 컬렉션을 지원하는 특별한 형태의 Map
과 Set
입니다. 키와 값이 약한 참조로 연결되어 있어, 참조가 사라지면 가비지 컬렉션의 대상이 됩니다.
1. WeakMap
let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'value');
console.log(weakMap.get(obj)); // 출력: value
obj = null;
// weakMap에서 obj에 대한 참조가 사라지고, 가비지 컬렉션에 의해 메모리 해제 가능
2. WeakSet
let weakSet = new WeakSet();
let obj = {};
weakSet.add(obj);
console.log(weakSet.has(obj)); // 출력: true
obj = null;
// weakSet에서 obj에 대한 참조가 사라지고, 가비지 컬렉션에 의해 메모리 해제 가능
결론
ES6에서 도입된 Map
, Set
, WeakMap
, WeakSet
객체는 더 다양한 데이터 구조를 제공하여 JavaScript 개발을 더욱 유연하고 효율적으로 만들어줍니다. 이 객체들을 활용하여 데이터 관리와 성능을 향상시킬 수 있습니다.
이로써 JavaScript 최신 기능 시리즈를 마치게 되었습니다. 이 시리즈를 통해 ES6 이후 도입된 다양한 기능을 이해하고, 이를 실제 코드에 적용할 수 있기를 바랍니다.
반응형
'JavaScript 최신 기능 시리즈 (ES6 이후)' 카테고리의 다른 글
[JavaScript 최신 기능 시리즈] 6일차: JavaScript 모듈 시스템 이해하기 (0) | 2024.08.06 |
---|---|
[JavaScript 최신 기능 시리즈] 5일차: JavaScript 클래스와 상속 이해하기 (0) | 2024.08.05 |
[JavaScript 최신 기능 시리즈] 4일차: JavaScript 화살표 함수 이해하기 (0) | 2024.08.04 |
[JavaScript 최신 기능 시리즈] 3일차: JavaScript 디스트럭처링 할당 이해하기 (0) | 2024.08.03 |
[JavaScript 최신 기능 시리즈] 2일차: JavaScript 템플릿 리터럴 이해하기 (0) | 2024.08.02 |