JS es6 자료구조 Map Set

김다운·2022년 3월 6일
0

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Keyed_collections

키기반의 컬렉션

Map과 Set은 입력된 키값을 기준으로 정렬되는 데이터의 집합(자료 구조)이다. 입력된 순서대로 반복적으로 접근 가능한 요소를 포함하고 있다.

Map

ES6에서 값들을 매핑하기 위한 새로운 데이터 구조를 소개했다. 그중 Map 객체는 간단한 키와 값을 서로 연결시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 한다.

다음은 map이 제공하는 기본적인 기능들이다. 각 요소들은 [키,값] 형태의 배열로 반복적으로 반환해주는 for ... of 를 사용할 수 있다.


const map = new Map(); //=> Map(0)
map.set('1','dawoon'); //=> Map(1) { '1' => 'dawoon' }
map.set('2','kim'); //=> Map(2) { '1' => 'dawoon', '2' => 'kim' }
console.log(map.size); //=> 2
console.log(map.get("1")) // => 'dawoon'
console.log(map.has("1")) // => true
map.delete("1") // => Map(1) { '2' => 'kim' }

for (var [key, value] of map) {
    console.log(key + " goes " + value); //=> 2 goes kim
}

Object와 Map의 차이

전통적으로 object는 문자열을 값에 매핑하는데 사용되었다 object는 키를 값으로 설정하고 값을 검색하고 키를 삭제하고 키에 저장된 내용을 검색 할 수 있게 만들어준다. 그러나 Map 객체는 더 나은 맵이 되도록 하는 몇가지 장점을 가지고 있다.

  • obejct 의 키는 String이고 Map의 키는 모든 type을 가질 수 있다.
  • Object는 크기를 수동으로 추적해야하지만 Map은 크기를 쉽게 얻을 수 있다.
  • Map은 삽입된 순서대로 반복된다.
  • 객체(object)에는 prototype이 있어 Map에 기본 키들이 있다.

object 와 Map 중 어떤 것을 사용해야하는지 결정하는 조건은

  • 실행 시 키를 알수 없고 모든 키가 동일한 type이고 모든 값들이 동일한 type일 경우엔 map을 사용한다.
  • 각 개별 요소에 대해 적용해야하는 로직이 있을경우 object를 사용한다.

WeakMap

WeakMap 은 object만을 키로 허용하고 값은 임의의 값을 허용하는 키/값 형태의 요소 집합이다.
Map 객체와 다른 점은 WeakMap의 키는 열거형이 아니라는 점이다.(키 목록을 제공해 주는 메서드가 없다.)

let weakMap = new WeakMap(); //weakMap 선언

let object={1:'dawoon'};

weakMap.set(object, 'dawoon!'); 

console.log(weakMap.get(object)); //dawoon!
console.log(weakMap.has(object)); //true

객체가 가비지 컬렉션의 대상이 되면 데이터가 자동으로 삭제된다. 반면 map 객체는 가비지 컬렉터의 대상이 되더라도 해당 데이터가 삭제되지 않는다.

Set

set 객체는 값들의 집합이다. 입력된 순서에 따라 저장된 요소를 반복처리 할 수 있다. Set은 중복된 값을 허용하지 않는다. 따라서 특정 값은 Set 내에서 하나만 존재하게 된다.

const mySet = new Set();
mySet.add(1);
mySet.add("dawoon");
mySet.add("dawoon");// 중복값은 삽입안됨!
mySet.add("kim");
console.log(mySet) // => Set(3) { 1, 'dawoon', 'kim' }

mySet.has(1); // true
mySet.delete("dawoon");
mySet.size; // 2

for (let item of mySet) console.log(item);
// 1
// "kim"

배열과 Set의 상호 변환

Array.from 혹은 spread operator 를 통해 Set객체를 가지고 Array를 생성할 수 있다. 또한 Set 생성자는 배열을 인자로 받을 수 있고 해당 배열을 Set객체의 요소로 저장한다. Set 객체는 중복된 값을 저장하지 않기 때문에 주어진 배열내의 중복된 요소들을 제거되어 Set으로 변환된다.

const mySet = [1,2,3,4,4]
mySet2 = new Set([...mySet]); // => Set(4) { 1, 2, 3, 4 } (중복 제거)

배열과 Set 비교

일반적으로 Js에선 배열에 특정 요소의 집합을 저장한다. 하지만 Set 객체는 몇가지 이점의 제공한다.

  • indexOf 메서드를 사용하여 배열내에 특정 요소가 존재하는지 확인 하는 것이 느리다.
  • 배열에선 해당 요소를 배열에서 잘라내야 하는 반면 Set객체는 요소의 값으로 해당 요소를 삭제하는 기능을 제공한다.
  • NaN은 배열에서 indexOf 메서드로 찾을 수 없다.
  • Set 객체는 값의 유일성을 보장하기 때문에 중복성을 확인 할 필요가 없다.

WeakSet

WeakSet 객체는 객체를 저장하는 일종의 집합이다. WeakSet 내의 중복된 객체는 없으며 WeakSet내의 요소를 열거할 수는 없다.
Set과 가장 큰 차이점은

  • Set과는 다르게 WeakSet은 객체의 집합이며 객체만 저장할 수 있다. 특정 type의 값을 저장할 수 없다.
  • WeakSet은 약한 참조를 가진다. WeakSet내의 저장되어 있는 객체에 대한 참조가 없게되면 가비지 컬렉션의 대상이된다.
profile
열려 있는 FE 개발자

0개의 댓글