[JavaScript] 내장 자료구조: Map과 Set

Map 

1. 특징

• key-value 쌍을 저장할 수 있는 collection
• 자료의 연관성을 표현하기 위해 사용한다. 
• key는 중복될 수 없다. 하나의 key에는 하나의 value만 가능하다. (value 값은 중복이 가능하다)
• map.set을 호출할 때마다 map 자신이 반환된다. 이를 이용해 map.set을 체이닝할 수 있다.
• map.set(key, value) 메소드를 통해 자료를 넣을 수도 있고, key, value 쌍으로 이루어진 요소로 구성된 이터러블을 생성자 함수의 인자로 전달할 수도 있다. 

// map.set 메소드 사용
const map = new Map();
map.set('key1', 'value1')
map.set('key2', 'value2')

// 생성자 함수에 이터러블을 인자로 전달
const map = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
])

 

2. Object와의 차이점 

• object에서 key의 자료형은 string만 가능한 반면, map은 key의 다양한 자료형(object, function, 원시자료형)을 허용한다. 
• object는 프로퍼티 순서를 기억하지 못하는 반면, map은 삽입 순서를 기억해 삽입된 순서대로 순회한다. 
• object의 크기를 구하려면 Object.keys().length 처럼 객체의 key들을 받아온 후 그 길이를 구하는 방식(O(n)의 시간복잡도)을 쓸 수 있지만, map은 map.size 속성을 제공하기 때문에 map의 크기를 O(1) 시간복잡도로 금방 구할 수 있다. 
• object는 순회를 위해서는 key나 value를 구하고, 그것들을 통해서 순회하는 반면, map은 그 자체가 iterable하기 때문에 내장 메소드 forEach나 for of를 써서 순회할 수 있다. 단, forEach 메소드의 인자로 들어오는 callback 함수의 인자는 key, value, map이 아닌 value, key, map 순서라는 점에 주의한다. 

 

3. Object와 Map 중 어느 것을 사용하는 것이 좋을지

• 실행(run time) 시까지 key를 알 수 없고, 모든 key의 자료형이 동일하고, 모든 value의 자료형이 동일한 경우 map을 사용 
• string이 아닌 자료형을 key로 저장해야 하는 경우, map을 사용
• 각 개별 요소에 적용해야 하는 로직이 있는 경우, object를 사용

 

Set

1. 특징

• 중복을 허용하지 않는 값을 모아놓은 collection으로 '값들의 집합'이라고 할 수 있다. 
• key 없이 value만 저장된다. 
• set은 값의 유일무이함을 확인하는데 최적화되어 있다. 
• set.add 메소드는 새로운 요소가 추가된 set 객체를 반환한다. 이를 이용해 set.add를 체이닝할 수 있다.
• for of나 forEach로 순회할 수 있다. 단, forEach 메소드의 인자로 들어오는 callback 함수의 인자는 value, valueAgain, set 으로 두 번째 인자도 첫번째 인자와 같은 값을 받는다. (Map과의 호환성 때문)
• 수학적 집합을 구현하기 위한 자료구조 : 합집합(union), intersection(교집합), difference(차집합) 등 구현 가능

 

2. Array와의 차이점 

• 값을 통해 배열의 요소를 삭제하는 것(arr.splice(arr.indexOf(value), 1))은 매우 느린 반면, set은 set.delete(value) 메소드를 제공한다. 

 

 

📚 참고자료

맵과 셋

Keyed collections - JavaScript | MDN

제발 한국인이라면 자바스크립트 Object를 Map 처럼 사용하지 맙시다.

Set과 Map이란?