Map과 WeakMap의 차이점
Map과 WeakMap은 모두 키(key)와 값(value)의 쌍을 저장한다는 점에서 기본적인 동작 방식은 같지만, 몇 가지 중요한 차이점이 있습니다.
1) 키 타입 제한 : WeakMap은 오직 객체(Object)만 키로 허용합니다. 반면 Map은 객체뿐만 아니라 문자열, 숫자 등 원시 타입(primitive)도 키로 사용할 수 있습니다.
2) 가비지 컬렉션 동작 : WeakMap은 키로 사용된 객체에 대한 참조가 더 이상 없으면, 해당 객체가 가비지 컬렉션(GC)에 의해 회수되는 것을 막지 않습니다. 이러한 특성 때문에 WeakMap에는 키 목록을 조회하는 메서드가 없습니다. 반면 Map은 Map.prototype.keys()와 같은 메서드로 키를 가져올 수 있습니다.
3) size 속성 부재 : WeakMap에는 저장된 요소의 개수를 나타내는 size 속성이 존재하지 않습니다.
이러한 특징 덕분에 WeakMap은 객체에 부가 데이터를 임시로 붙여 두거나, 메모리 누수를 걱정하지 않고 캐시를 구현할 때 특히 유용합니다.
Map
Map은 문자열, 숫자, 객체 등 데이터 타입에 상관없이 키와 값을 자유롭게 연결(매핑)하는 데 사용됩니다.
예제
<html>
<body>
<script>
// 새로운 Map 객체 생성
var map = new Map();
// Map의 키로 사용할 객체 정의
var objKey = {name: 'tutorialspoint'};
document.write("</br>");
// 키: 문자열, 값: 문자열인 요소 추가
map.set('first', 'a');
document.write("</br>");
// 키: 숫자, 값: 배열인 요소 추가
map.set(3, ['c']);
document.write("</br>");
// 키: 객체, 값: 숫자인 요소 추가
map.set(objKey, 3);
// 키: 배열, 값: 문자열인 요소 추가
map.set(['add', 'mapping'], 'd');
// 키가 2인 요소의 존재 여부 확인 → false 출력
document.write(map.has(2));
document.write("</br>");
// 키가 'first'인 요소의 존재 여부 확인 → true 출력
document.write(map.has('first'));
document.write("</br>");
// 키가 'first'인 요소 조회 → 'a' 출력
document.write(map.get('first'));
document.write("</br>");
// 키가 objKey인 요소 조회 → 3 출력
document.write(map.get(objKey));
document.write("</br>");
// 키가 'empty'인 요소 조회 → undefined 출력
document.write(map.get('empty'));
document.write("</br>");
// Map의 크기 조회 → 4 출력
document.write(map.size);
document.write("</br>");
// 모든 요소 삭제 후 크기 확인 → 0 출력
map.clear();
document.write(map.size);
</script>
</body>
</html>
실행 결과
false true a 3 undefined 4 0
WeakMap
아래 예제를 실행해 보면 WeakMap은 객체만 키로 받아들일 뿐, 문자열이나 숫자 같은 원시 값은 키로 사용할 수 없다는 것을 알 수 있습니다.
예제
<html>
<body>
<script>
// 새로운 WeakMap 객체 생성
var weakMap = new WeakMap();
// 키로 사용할 객체 정의
var obj4 = {d: 4};
// 키로 사용할 또 다른 객체 정의
var obj5 = {e: 5};
// 키: 객체, 값: 문자열인 요소 추가
weakMap.set(obj4, 'fourth');
// 키: 객체, 값: 문자열인 요소 추가
weakMap.set(obj5, 'fifth');
// 키: 함수, 값: 숫자인 요소 추가
weakMap.set(function(){}, 7);
// 키가 obj4인 요소의 존재 여부 확인 → true 출력
document.write(weakMap.has(obj4));
document.write("</br>");
// 키가 obj4인 요소의 값 조회 → 'fourth' 출력
document.write(weakMap.get(obj4));
document.write("</br>");
// 키가 obj4인 요소 삭제 → true 출력
document.write(weakMap.delete(obj4));
document.write("</br>");
// WeakMap의 모든 요소 삭제
weakMap.clear();
</script>
</body>
</html>
실행 결과
true fourth true
참고 : WeakMap은 키를 열거할 수 없어 순회(iteration)가 불가능하며, 최신 표준 스펙에서는 clear() 메서드가 공식 지원되지 않으므로 실무에서 사용할 때 주의가 필요합니다.