자바스크립트 WeakMap – 당신이 몰랐던 비밀 보관자
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
자바스크립트 개발자, 메모리 관리 및 데이터 암시적 처리가 필요한 프론트엔드 개발자
난이도: 중급 (메모리 관리 및 객체 지향 개념 이해 필요)
핵심 요약
- WeakMap은 객체를 키로 사용하며, 메모리 누수 방지에 유리한 특성.
- 비공개 데이터 저장에 적합, 외부 코드에서 접근 불가.
- DOM 요소와 연결된 데이터 자동 정리, 가비지 컬렉션 지원.
섹션별 세부 요약
1. WeakMap의 정의
- 객체를 키로 사용, 가비지 컬렉션이 키를 제거할 수 있음.
- 키가 존재하지 않으면 값도 자동 제거됨.
Map과 달리 비열거 가능 및 비검사 가능.
2. 사용 사례
- 트루로 비공개 데이터 저장 (예: DOM 요소의 메타데이터).
- 메모리 누수 방지를 위해 일시적 객체와 연관된 데이터 관리.
- 외부 코드에서 구현 세부 사항 숨기기.
3. 예제 코드
WeakMap을 사용해 DOM 요소의 클릭 타임스탬프 저장:
```javascript
const clickTimestamps = new WeakMap();
const box1 = document.getElementById("box1");
clickTimestamps.set(box1, new Date());
```
- 요소가 DOM에서 제거되면 자동으로 데이터도 제거됨.
4. 메커니즘
- WeakMap은 DOM 요소와 연관된 데이터를 저장하지만, 요소가 메모리에서 제거되면 데이터도 삭제됨.
- DOM 요소에 추가 속성 없이 메타데이터 관리 가능.
5. WeakMap vs. Map
| 특징 | WeakMap | Map |
|---------------|----------------|----------------|
| 키 유형 | 객체 | 객체/원시값 |
| 메모리 관리 | 자동 정리 | 수동 정리 필요 |
| 열거 가능 여부| 불가능 | 가능 |
6. 주의사항
- 반복 불가능, 크기 확인 불가능, 내부 데이터 시각화 불가능.
- 키 객체가 삭제되면 값도 영구히 사라짐.
7. WeakSet과의 차이
WeakSet은 유일한 요소 집합 관리,WeakMap은 키-값 쌍 관리.WeakSet은 추후 다루기로 함.
결론
- WeakMap은 메모리 누수 방지와 비공개 데이터 관리에 적합.
- DOM 요소와 관련된 데이터 저장 시 자동 정리 기능 활용.
- 반복 및 크기 확인 불가능이라는 제한을 고려해 사용.