Map

JavaScript에서 객체와 배열을 이용하면 굉장히 다양하고 복잡한 프로그래밍을 할 수가 있다. 그럼에도 불구하고 여전히 현실세계의 복잡성을 프로그래밍적으로 반영하기에는 부족하다.
Map과 Set은 이러한 한계를 극복하고자 비교적 최근 등장한 자료구조라고 할 수 있다.
이 두 자료 구조는 데이터의 구성, 검색 및 사용을 객체나 배열보다 효율적으로 처리할 수 있기 때문에 많이 각광받고 있다.

Map

Map은 키-값 pair를 저장하는 객체와 비슷하다. Map은 각 pair의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다. Map은 키가 정렬된 순서로 저장되기 때문에 추가한 순서대로 반복할 필요가 없다.
Map을 사용하면 다음과 같은 작업을 수행할 수 있다.

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제(delete)
• 모든 키-값 쌍 제거(clear)
• Map 크기 및 존재 여부 확인(size)

맵의 주요 메서드와 프로퍼티

• new Map() - 새로운 맵을 만든다.
• map.set(key, value) - key를 이용해 value를 저장한다.
• map.get(key) - key에 해당하는 값을 반환한다. key가 존재하지 않으면 undefined를 반환한다.
• map.has(key) - key가 존재하면 true, 존재하지 않으면 false를 반환한다.
• map.delete(key) - key에 해당하는 값을 삭제한다.
• map.clear - 맵 안의 모든 요소를 제거한다.
• map.size - 요소의 개수를 반환한다.

<Map 생성 및 사용>

새로운 Map을 만들려면 Map()의 생성자를 사용한다.

const myMap = new Map();

Map에 값을 추가하려면 Set() 메소드를 사용한다.

myMap.set('key', 'value');

Map에서 값을 검색하려면 get() 메소드를 사용한다.

console.log(myMap.get('key'))

<Map의 반복>
Map에서는 keys(), values(), entries() 메소드를 사용하면 키, 값 및 키-값 쌍을 반복할 수 있다.

<script>
//새로운 Map생성
const myMap = new Map();

//Map내에 키-값 추가 및 할당
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}
>> 'one' 'two' 'three'

for (const value of myMap.values()) {
  console.log(value);
}
>> 1 2 3

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}
>> ['one', 1] ['two', 2] ['three', 3]
</script>

참고

Object와 Map 비교

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

Object의 키는 Strings이며, Map의 키는 모든 값을 가질 수 있다.
Object는 크기를 수동으로 추적해야하지만, Map은 크기를 쉽게 얻을 수 있다.
Map은 삽입된 순서대로 반복된다.
객체(Object)에는 prototype이 있어 Map에 기본 키들이 있다. (이것은 map = Object.create(null) 를 사용하여 우회할 수 있다. )
Object 혹은 Map중에 어느 것을 사용할지를 결정하는데 도움을 줄 두가지 팁이 있다:

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