[JavaScript] Object Map 알아보기

 

JavaScript 에서 HashTable은 대표적으로 객체(Object), Map, Set이 있습니다.

 

그런데 코드를 짜다보면 Key-Value 형태로 이루어진 자료구조는 객체(Object)가 대표적이었지만, ES6에 들어서서는 Map과 Set이 추가되었습니다.

 

Map 객체

 

Map 객체는 Key-Value 쌍과 Key의 원래 삽입 순서를 기억합니다. 모든 값은 키 또는 값으로 사용될 수 있습니다.

 

JavaScript에서의 Map은 java의 HashMap, python의 Dictionary와 같은 자료구조입니다.

 

Map 생성

let map = new Map();

 

위와 같이 생성자를 통해서 Map객체를 생성할 수 있습니다.

Map 크기

const map1 = new Map();

map1.set('a', 'alpha');
map1.set('b', 'beta');
map1.set('g', 'gamma');

console.log(map1.size); // 결과 : 3

size 구하기

객체(Object)의 경우 Size를 사용할 수 없습니다.

 

하지만 Object Map은 size() 함수를 사용하면 size를 구할 수 있습니다.

const map1 = new Map();

map1.set('bar', 'baz');
map1.set(1, 'foo');

console.log(map1.size); // 결과 : 2

모든 key-value 삭제

const map1 = new Map();

map1.clear();

console.log(map1.size); // 결과 : 0

 

Key로 Vaule 구하기

map.get(key)

특정 Key가 있는 지 확인

map.has(key)

 

Map에 추가

const map1 = new Map();
map1.set('bar', 'foo');

console.log(map1.has('bar')); // 결과 : true

console.log(map1.has('baz')); // 결과 : false

특정 Key가 있는 지 확인

const map1 = new Map();

map1.set('0', 'foo');
map1.set(1, 'bar');

const iterator1 = map1.entries();

console.log(iterator1.next().value); // 결과 : Array ["0", "foo"]

console.log(iterator1.next().value); // 결과 : Array [1, "bar"]

 

 

Map의 장점

다양한 형태 👌

 

JavaScript의 객체(Object)는 문자(String) 또는 Symbol(기호)만 가질 수 있었습니다.

 

그러나 Object Map은 다양한 형태를 가질 수 있습니다.

const map = new Map();
const func = () => console.log('Hello Object Map');
const str = 'Object Map';
const num = 123;
const obj = {
  name: 'Park',
  age: 28
};

map.set(func, 'function as a key');
map.set(num, 'number as a key');
map.set(obj, 'object as a key');

console.log(map.get(myFunction)); // function as a key
console.log(map.get(myNumber)); // number as a key
console.log(map.get(myObject)); // object as a key

console.log(map) 
// Map(3) {ƒ => 'function as a key', 123 => 'number as a key', {…} => 'object as a key'}

 

---

좋은 성능

key,value의 형태로 저장되며 모든 데이터가 유일한 key를 가지고 있으므로 특정한 값을 아주 빠르게 찾을 수 있다는 특징을 가지고 있습니다.

 

해시가 특정한 값(데이터)를 아주 빠르게 찾을 수 있는 이유는 데이터를 검색할 때 사용할 key와 value가 1:1 매칭으로 존재하기 때문에 O(1)의 시간복잡도를 가지기 때문입니다.

---

다양한 형태의 반복문 사용

let map = new Map([
  ['name', Park],
  ['age', 28],
  ['sex', 'M']
]);

// key를 대상으로 순회.
for (let key of map.keys()) {
  console.log(key); // name, age, sex
}

// value을 대상으로 순회.
for (let value of map.values()) {
  console.log(value); // Park, 28, M
}

// [key, vaule] 쌍을 대상으로 순회.
for (let [key, value] of map) { 
  console.log(key + "," + value); 
}

---

순서의 보장

const arr = [{key:3, value:'test1'},{key:1, value:'test2'},{key:2, value:'test3'}]
const obj = {}
arr.forEach(data => {
    obj[data.key] = data.value
})
console.log(obj) // 결과 {1: 'test2', 2: 'test3', 3: 'test1'}

 

위 코드를 보면 객체의 key를 숫자로 지정했습니다. 그리고 forEach()를 사용하여 객체를 순회하면 삽입할 때 와는 다른 순서가 출력되는 것을 볼 수 있습니다.

const map = new Map();
map.set(3, 'test1')
map.set(1, 'test2')
map.set(2, 'test3')

for(const v of map){
    console.log(v)
}
/*
[3, 'test1']
[1, 'test2']
[2, 'test3']
*/

 

그러나 Object Map에서는 원래의 삽입 순서를 기억할 수 있습니다.

 

 

Reference

• Mdn web docs
• 모던 JavaScript