자바스크립트 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 요소와 관련된 데이터 저장 시 자동 정리 기능 활용.
• 반복 및 크기 확인 불가능이라는 제한을 고려해 사용.