Map이란?
Map은 키(key)와 값(value) 쌍을 저장하는 자바스크립트의 내장 자료구조입니다. Map의 가장 큰 특징은 다음 두 가지입니다.
- 키가 삽입된 실제 순서를 그대로 기억합니다.
- 키는 항상 고유(unique)해야 하며, 중복된 키는 허용되지 않습니다.
Map의 기본 생성 문법은 다음과 같습니다.
new Map([iterable])
Case 1: Map이 없을 때 발생하는 문제
Map이 등장하기 전에는 자바스크립트 객체(object)에 객체 타입의 키를 제대로 사용할 수 없다는 한계가 있었습니다. 객체를 키로 지정하면 내부적으로 문자열 "[object Object]"로 변환되기 때문에, 여러 개의 객체를 키로 사용하더라도 마지막에 할당된 값만 남게 됩니다.
아래 예제에서는 서로 다른 객체 a와 b를 키로 사용했지만, 출력 결과에는 b에 해당하는 값만 남아 있는 것을 확인할 수 있습니다. 바로 이러한 단점을 보완하기 위해 자바스크립트에 Map이 도입되었습니다.
예제 코드
<html>
<body>
<script>
const x = {};
const a = {};
const b = {
num:3
}
x[a] = "a";
x[b] = "b";
document.write(JSON.stringify(x));
</script>
</body>
</html>
실행 결과
{"[object Object]":"b"}
Case 2: Map을 사용했을 때
Map은 앞서 설명한 대로 키의 실제 삽입 순서를 기억하기 때문에, 객체 타입의 키라도 각각 구분하여 저장할 수 있습니다. 아래 예제에서는 set() 메서드로 키-값 쌍을 추가하고, entries() 메서드를 통해 저장된 모든 키와 값을 순서대로 출력합니다.
실행 결과를 보면 첫 번째 키인 빈 객체 '{}'에 대응하는 값 'a'와, 두 번째 키 '{"num":3}'에 대응하는 값 'b'가 모두 정상적으로 출력되는 것을 확인할 수 있습니다.
예제 코드
<html>
<body>
<script>
const a = {};
const b = {
num:3
}
const map = new Map();
map.set(a, "a").set(b, "b");
for(let[key, value] of map.entries()){
document.write(JSON.stringify(key, value)); // Map으로 키 출력
document.write((key, value)); // Map으로 값 출력
}
</script>
</body>
</html>
실행 결과
{}a {"num":3}b
정리
일반 객체는 키로 문자열만 사실상 사용할 수 있어 객체 타입의 키를 구분하지 못하지만, Map은 어떤 타입의 키든 고유하게 관리하고 삽입 순서까지 보장합니다. 따라서 객체를 키로 사용해야 하거나 데이터의 순서가 중요한 경우에는 Map을 사용하는 것이 좋습니다.