[JavaScript] 맵(Map)

Map은 key-value 간의 관계를 나타내는 자료 구조입니다.

객체 역시 key-value 간의 관계를 프로퍼티라고 표현하면서 나타내는 자료형이었습니다.

그렇다면 객체와 Map의 차이점은 무엇일까요?

바로 key에서 사용할 수 있는 자료형의 차이입니다. 

 

객체에서는 프로퍼티 키로 올 수 있는 값은 String이나 Symbol이어야 합니다.

반면, Map의 경우 프로퍼티 키로 올 수 있는 자료형에 따로 제약이 없습니다.

 

예시 코드를 통해서 Map 객체를 생성하고 key-value 쌍을 만들고 조회하는 등의 과정을 살펴보겠습니다.

 

let map = new Map(); // Map 객체 생성

map.set('key1', 'value1'); // set method를 이용해서  key-value 쌍 생성
map.set(()=>console.log('key2'), 'value2')
map.set(true, false);
console.log(map);

console.log('key 값이 key1인 값 조회: ', map.get('key1'));

map.delete(true); // key 값이 true인 프로퍼티 삭제
console.log(map);
console.log(map.has(true)) // key 값이 true인 프로퍼티 있는지 확인
console.log(map.size); // map size 반환
map.clear(); // map 초기화
console.log(map);

아래 맵의 메서드들을 이용하면 더 효과적으로 맵 객체를 이용하실 수 있습니다.

map.keys() // map 객체의 key를 모은 반복 가능한 객체 반환
map.values() // map 객체의 값을 모은 반복 가능한 객체 반환
map.entries() //map 객체의 key-value 쌍을 모은 반복 가능한 객체 반환

간단하게 위 값들을 사용한 예제 코드를 작성해보겠습니다.

let players = new Map([
    ['Messi', 10],
    ['Son', 7],
    ['Van Dijk', 4],
]) // Map 객체에 값을 넣고 바로 선언

console.log(players.keys());
console.log(players.values());
console.log(players.entries());

이 값들을 모든 반복 가능, 즉 이터러블한 객체들이므로 모두 for ... of 문에서 사용이 가능하다는 특징을 가지고 있습니다.

 

추가로, 위에서 언급드렸듯이 객체와 맵은 키 - 값 쌍을 다룬다는 점에서 매우 유사하다고 말씀드렸는데요, 메서드를 사용하면 객체->맵, 맵->객체로 유연하게 변경할 수 있습니다.

Object.entries // 객체->맵 바꾸기
Object.fromEntries // 맵->객체 바꾸기

여기서 키 값이 string이나 symbol이 아닌 맵을 객체로 바꾸려고 한다면, 키 값이 string 값으로 변환이 된 이후에 맵이 객체로 변환이 됩니다. 

 

참고

https://ko.javascript.info/map-set

맵과 셋