[ES6] Map vs Set

ES6 문법에서 추가된 Map과 Set 에 대해 알아보자.

나의 친구 mdn을 참고했다.(참고링크)

---

 

1.  Map

The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value may be used as either a key or a value.

 

위의 뜻만 보면 key-value pairs로 데이터를 저장한다는 점에서 Object와 차이를 느끼기 힘들어 보인다. 

그치만 만약 똑같다면 ES6에서 굳이 추가 됐을 이유가 없다.

 

Object와 Map의 차이점에 대해 알아보도록 하자.( 참고링크 )

 

---

Map vs Object

1. key Types

Object의 경우, key 값으로 string 혹은 symbol형태만 받을 수 있었다.

Map의 경우, key 값으로 어떤 형태의 데이터든지 다 받을 수 있다.

 

 

2.Key Order

Object: 사실 Object.entries 나 Object.keys, Object.values 를 이용하면 내가 집어 넣은 순서대로 출력되는 것을 볼 수 있으나
mdn이나 여러 곳에서 Object의 순서가 결정되는 로직은 복잡하며 믿을 수 없으니, it is best not to rely on property order. 이라고 하고 있다.

 

Map: 항상 입력 받은 순서대로 저장되어 있다. 즉, 순서를 믿을 수 있다.

 

3. Size

Object: 사이즈를 측정할 수 없다. 측정하고자 한다면, Object.keys와 같은 다른 메소드를 이용하여 배열로 받은 다음 체크 할 수 있었다. 

 

Map: 바로 Map.size 와 같은 형식으로 접근이 가능하다.

 

4. Iteration

Object: Iterable 하지 않다. 따라서, Object.entries 등 과 같은 메소드를 통해 Iterable한 상태로 데이터를 가공한 다음 접근 가능했다.
물론, for...in 구문으로 접근도 가능하지만 성능상의 문제로 해당 구문은 사용을 자제하라고 한다.

 

Map: Iterable하다. 바로 for...of 와 같은 구문들을 사용 할 수 있다. 

 

---

사용법

Map의 주요 메소드 및 사용법

const contacts = new Map()
contacts.set('Jessie', {phone: "213-555-1234", address: "123 N 1st Ave"})
contacts.has('Jessie') // true
contacts.get('Hilary') // undefined
contacts.set('Hilary', {phone: "617-555-4321", address: "321 S 2nd St"})
contacts.get('Jessie') // {phone: "213-555-1234", address: "123 N 1st Ave"}
contacts.delete('Raymond') // false
contacts.delete('Jessie') // true
console.log(contacts.size) // 1

 

 

---

Map요소 순회하기

Map은 앞서 설명한 것 처럼 for...of 문법 및 forEach 구문 사용이 가능하다.

const myMap = new Map()
myMap.set(0, 'zero')
myMap.set(1, 'one')

for (const [key, value] of myMap) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

for (const key of myMap.keys()) {
  console.log(key)
}
// 0
// 1

for (const value of myMap.values()) {
  console.log(value)
}
// zero
// one

for (const [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value)
}
// 0 = zero
// 1 = one

myMap.forEach(function(value, key) {
  console.log(key + ' = ' + value)
})
// 0 = zero
// 1 = one

 

---

 

2. Set

• Set은 데이터 타입에 관계 없이 원시형 데이터 타입과 참조형 데이터 타입 모두 저장 가능하다. 
• Set은 key값 없이 value를 저장한다는 점에서 Array와 흡사하다.
• Set은 value간의 중복을 허용하지 않는다. 

 

사용법

주요 메소드의 사용법은 아래와 같다.

var mySet = new Set();

mySet.add(1); // Set { 1 }
mySet.add(5); // Set { 1, 5 }
mySet.add(5); // Set { 1, 5 }
mySet.add('some text'); // Set { 1, 5, 'some text' }
var o = {a: 1, b: 2};
mySet.add(o);

mySet.add({a: 1, b: 2}); // o와 다른 객체를 참조하므로 괜찮음

mySet.has(1); // true
mySet.has(3); // false, 3은 set에 추가되지 않았음
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has('Some Text'.toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 5

mySet.delete(5); // set에서 5를 제거함
mySet.has(5);    // false, 5가 제거되었음

mySet.size; // 4, 방금 값을 하나 제거했음
console.log(mySet);// Set {1, "some text", Object {a: 1, b: 2}, Object {a: 1, b: 2}}

 

---

활용법

Set메소드가 중복 값을 허용하지 않는다는 점을 이용하면 다음과 같이 중복값을 모두 제거 할 수 있다.

let arr = [1, 2, 3, 1, 1, 3, 2];
arr = [...new Set(arr)];