자바스크립트 고급 데이터 타입: WeakMap과 WeakSet의 개념과 실전 활용

자바스크립트에서 메모리 관리는 성능 최적화와 효율적인 코드 작성에 중요한 역할을 합니다. 특히, WeakMap과 WeakSet은 객체 참조를 약하게 유지하여 가비지 컬렉션(Garbage Collection, GC)을 자동화하는 특징을 가집니다. 이를 통해 메모리 누수를 방지하고 불필요한 데이터를 최소화할 수 있습니다.

이번 포스트에서는 WeakMap과 WeakSet의 개념, 기본적인 특징, 활용 방법, 그리고 실무에서 어떻게 유용하게 사용할 수 있는지에 대해 깊이 있게 알아보겠습니다.

---

🔍 WeakMap이란?

WeakMap의 개념

WeakMap은 키-값 형태로 데이터를 저장하는 자료 구조입니다. 일반적인 Map과 달리, 키로 오직 객체만 사용 가능하며, 객체의 참조가 없어지면 자동으로 가비지 컬렉터에 의해 제거됩니다.

WeakMap의 특징

• 객체만 키로 사용 가능 → 기본형(숫자, 문자열, 불리언 등)은 키로 사용할 수 없음
• 자동 메모리 관리 → 키로 사용된 객체가 더 이상 참조되지 않으면 자동으로 삭제됨
• 크기 확인 불가능 → size 속성이 없음
• 반복(iteration) 불가능 → forEach(), keys(), values() 등의 메서드를 제공하지 않음

WeakMap의 예제 코드

let weakmap = new WeakMap();
let user = { name: "Alice" };

weakmap.set(user, "User Data");

console.log(weakmap.get(user)); // "User Data"

// user 객체에 대한 참조 제거
user = null;

// 이후 가비지 컬렉터가 실행되면 WeakMap에서도 자동으로 해당 데이터 삭제

👉 위 코드에서 user 객체의 참조가 사라지면, WeakMap에 저장된 데이터도 자동으로 제거됩니다.

---

🔍 WeakSet이란?

WeakSet의 개념

WeakSet은 특정 객체만 저장할 수 있는 집합(Set) 구조입니다. 일반적인 Set과 달리, 객체가 메모리에서 삭제되면 자동으로 WeakSet에서도 제거됩니다.

WeakSet의 특징

• 객체만 저장 가능 → 기본형 데이터(숫자, 문자열 등)는 추가할 수 없음
• 자동 메모리 관리 → 더 이상 사용되지 않는 객체는 자동 삭제됨
• 반복(iteration) 불가능 → forEach()와 같은 반복 기능이 없음
• 크기 확인 불가능 → size 속성이 없음

WeakSet의 예제 코드

let weakset = new WeakSet();
let obj1 = { type: "example" };

weakset.add(obj1);
console.log(weakset.has(obj1)); // true

// obj1 참조 제거
obj1 = null;

// 가비지 컬렉터 실행 후 WeakSet에서도 자동으로 삭제됨

👉 obj1이 더 이상 필요 없으면 WeakSet에서도 자동 삭제되므로, 메모리 누수를 줄이는 데 유용합니다.

---

🛠 WeakMap과 WeakSet의 활용법

1️⃣ DOM 요소와의 연계

웹 개발에서 이벤트 리스너와 DOM 요소를 함께 사용할 때 메모리 누수가 발생할 수 있습니다. 이를 방지하기 위해 WeakMap을 활용하면, DOM 요소가 삭제될 때 자동으로 관련 데이터도 정리됩니다.

let elementData = new WeakMap();

function trackElement(element) {
  elementData.set(element, { time: Date.now() });
}

let div = document.createElement("div");
trackElement(div);

// div 요소 삭제 시 WeakMap에서도 자동으로 해당 정보 제거됨
div = null;

✅ 이점: 수동으로 데이터를 삭제할 필요 없이, GC(가비지 컬렉션)에 의해 자동 정리됨.

---

2️⃣ 사용자 세션 관리

사용자 세션과 관련된 데이터를 저장할 때 WeakMap을 활용하면 사용자가 로그아웃하거나 세션이 만료될 때 자동으로 데이터가 삭제될 수 있습니다.

let userSessions = new WeakMap();

function login(user) {
  userSessions.set(user, { sessionId: Math.random() });
}

let currentUser = { name: "John" };
login(currentUser);

console.log(userSessions.get(currentUser)); // 세션 데이터 표시

// 사용자가 로그아웃
currentUser = null;

// 가비지 컬렉터 실행 시 WeakMap에서 자동 제거됨

✅ 이점: 수동으로 세션을 삭제할 필요 없이, 자동으로 정리됨.

---

3️⃣ 임시 캐싱 시스템 구축

WeakMap을 이용해 임시적인 캐싱 시스템을 만들 수도 있습니다.

let cache = new WeakMap();

function getData(obj) {
  if (!cache.has(obj)) {
    cache.set(obj, Math.random()); // 임의의 값 저장
  }
  return cache.get(obj);
}

let dataObj = {};
console.log(getData(dataObj)); // 캐싱된 값 반환

// 객체 참조 해제
dataObj = null;

// 이후 가비지 컬렉터 실행 시 WeakMap에서 자동으로 삭제됨

✅ 이점: 일시적인 데이터를 저장할 때 효과적이며, 필요 없어진 데이터는 자동 삭제됨.

---

🧐 WeakMap과 WeakSet을 언제 사용할까?

기능	WeakMap	WeakSet
저장 방식	키-값 쌍	객체 모음
기본형 사용	❌ (객체만 가능)	❌ (객체만 가능)
자동 메모리 관리	✅	✅
크기 확인 가능	❌	❌
반복(iteration) 가능	❌	❌

✅ WeakMap/WeakSet이 적절한 경우:

✔ 이벤트 리스너나 DOM 요소 관련 데이터를 관리할 때
✔ 사용자 세션과 같은 임시적인 데이터를 저장할 때
✔ 메모리 누수를 방지하고 자동으로 데이터를 정리해야 할 때

❌ 일반 Map과 Set이 더 적절한 경우:

✔ 전체 데이터 크기를 알고 싶을 때
✔ 반복(iteration)을 사용해야 할 때
✔ 기본형 데이터(숫자, 문자열)를 저장해야 할 때

---

🏁 결론

WeakMap과 WeakSet은 자바스크립트에서 보다 효율적인 메모리 관리를 가능하게 하는 강력한 도구입니다.
✅ 불필요한 객체를 자동으로 정리하여 메모리 누수를 방지하고,
✅ 임시 데이터를 저장하는 데 매우 유용하게 활용될 수 있습니다.