JS의 자료구조를 공부하며 Map과 Set은 왜 사용하는지, 어떻게 사용하는지 알기위해 정리하게 되었다.
Map
ECMAScript 6에서 값들을 매핑하기 위해 새로 추가된 데이터 구조이다.
기존 Object와 마찬가지로 키와 값을 매핑하여 저장하며, 다양한 장점을 아래와 같이 정리해보았다.
1. 순차적 접근의 용이성
2. 요소 순회의 용이성
3. 키 선언시의 용이성
순차적 접근의 용이성
저장된 순서대로 각 요소들을 접근할 수 있는 장점이 있으며, 기존 Object는 선언한대로 정렬되지 않으나 Map은 선언한 순서대로 정렬된다.
// 객체를 활용한 경우
obj = {}
obj['a'] = 1
obj['c'] = 3
obj[123] = 456
console.log(obj)
/*
123: 456,
a: 1,
c: 3
*/
// Map을 활용한 경우
map = new Map()
map.set('a', 1)
map.set('b', 2)
map.set(123, 456)
map.entries()
// MapIterator {'a' => 1, 'b' => 2, 123 => 456}요소 순회의 용이성
기존 Object는 Object.entries등의 메서드를 활용하여 키와 값을 순회하였으나, Map의 경우 배열과 같이 바로 사용이 가능하다.
즉, size함수를 지원하기에 요소의 수를 조회하는 것도 가능하다.
// 기존의 객체
const obj = {
a: 1,
b: 2,
c: 3
}
for(const [key, value] of Object.entries(obj)) {
console.log(`key: ${key}, value: ${value}`)
}
console.log(Object.keys(obj).length) // 3
// Map을 사용한 경우
const map = new Map()
map.set('a', 1)
map.set('b', 1)
map.set('c', 1)
// 배열이 아님에도 for ~ of 구문의 사용이 가능하다.
for(const [key, value] of map) {
console.log(`key: ${key}, value: ${value}`)
}
map.size() // 3키 선언시의 용이성
Map은 Object와 상반되게 대부분의 자료형태를 키로 선언할 수 있으며, 이는 객체와 같은 자료 또한 활용이 가능하다.
다만 이 때 생각해야할 점은 Object는 메모리에 할당되는 값이기에, 같은 키와 값을 가진다 하더라도 === 결과는 false로 반환된다.
해결 방법은 변수를 선언하여 같은 Object를 할당한 후 get, set에 활용하는 것
const obj = {
a: 1,
b: 2,
c: 3
}
const map = new Map()
map.set(obj, 'Object Key')
map.get(obj) // return 'Object Key'WeakMap
WeakMap은 Map에서 Garbage Collection의 기능이 추가된 형태이다.
즉, 선언된 키의 값이 더이상 존재하지 않는 값을 참조하는 경우 해당 데이터를 제거한다.
weakMap = new WeakMap()
weakMap.set(obj, 'Object key')
obj = null
// 데이터는 Garbage Collection에 적용되어 더이상 가져올 수 없다.Set
Set은 JS의 Array와 비슷한 형태를 가진 자료구조이며, Map과 같이 ECMAScript 6버전에 도입되었다.
공부해본 바 두 가지의 경우에서 주로 사용된다.
1. 중복값을 허용하지 않는 집합을 생성할 때
2. 특정 요소가 존재하는지 확인하는 경우
가장 큰 특징은 중복된 값을 허용하지 않는다는 것
중복값을 허용하지 않는 집합을 생성할 때
const array = [1, 2, 2, 3, 4, 4, 5]
console.log(array) // [1, 2, 2, 3, 4, 4, 5]
const set = new Set(array)
set.valeus() // SetIterator {1, 2, 3, 4, 5}
const newArr = [...set]
console.log(newArr) // [1, 2, 3, 4, 5]특정 요소가 존재하는지 확인하는 경우
// 배열로 수행하는 경우
const array = [1, 2, 2, 3, 4, 4, 5]
console.time()
array.indexOf(6)
console.timeEnd()
// default: 0.01220703125 ms
// Set자료구조를 사용하는 경우
const set = new Set(array)
console.time()
set.has(6)
console.timeEnd()
// default: 0.0048828125 ms다양한 자료구조를 알아보았으며, WeakSet의 경우, 실무에서 사용될 가능성이 전혀 없다는 의견을 들어 해당 게시물엔 작성하지 않았다.
추가로 ES 버전이 업데이트된다면, 추가된 자료구조에 대해 더 알아보고 싶음!
