[ECMAScript6 / ES6] Map , Set

Map

• Object를 변형한 것이다.
• 키-값 쌍을 저장한다.
• 각 쌍의 삽입 순서를 기억한다.

let map = new Map([["dog", "woof"]]);
map.set("cat", "meow");
 
for (var [key, value] of map) {
  console.log(key + " goes " + value);
}
//dog goes woof
//cat goes meow
 
map.get("dog"); //"woof"
map.size; //2
map.has("cat"); //true
map.keys(); //{"dog", "cat"}
map.values(); //{"woof", "meow"}
map.delete("dog");
map.entries(); //{"cat" => "meow"}
map.clear();

Object와 Map 차이점

• Map의 key는 함수, 객체, 원시 자료형 등 모든 값을 사용할 수 있지만, Object의 key는 String, Symbol만 사용할 수 있다.
• Map의 key는 삽입 순으로 정렬되지만 Object의 key는 그렇지 않다.
• Map의 크기는 size 속성으로 확인할 수 있지만 Object의 속성 수는 수동적으로 확인해야 한다.
• Map은 iterable 객체이기 때문에 바로 순회할 수 있지만, Object를 순회하려면 어떤 방법이든 키의 배열을 얻고, 그 배열을 순회해야 합니다.
• Object는 프로토타입을 가지므로, 주의하지 않으면 키가 충돌할 수 있다. ES5부터는 Object.create(null)을 사용해도 되지만 거의 쓰이지 않는다.
• 잦은 키의 추가와 제거가 필요한 시나리오에서는 Map이 더 빠르다.

Object와 Map 선택 팁

• 실행 시까지 키를 알 수 없고, 모든 키가 동일한 type이며 모든 값들이 동일한 type일 경우에는 objects를  대신해서 Map을 사용한다.
• 각 개별 요소에 대해 적용해야 하는 로직이 있을 경우에는 objects를 사용한다.

 

Set

• Array를 변형한 것이다.
• 값 콜렉션이다.
• 삽입 순서대로 요소를 순회할 수 있다.

var set = new Set([1,2,3]);
set.add(4);
set.has(4); // true
set.has(6); // false
set.size; // 4
set.keys(); // {1, 2, 3, 4}
set.values(); // {'zero', 'hero'}
set.delete(1);
set.entries(); // {2 => 2, 3 => 3, 4 => 4}
set.clear();

 

 

Array와 Set 차이점

• Set은 Array와 같이 인덱스로 요소에 대한 값을 확인할 수 없다.
• Set 중복되는 값을 허용하지 않는다.
• Set은 특정 요소를 제거할 수 있는 메서드를 제공한다.

 

 

[참고]

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

https://medium.com/front-end-weekly/es6-set-vs-array-what-and-when-efc055655e1a