← Iterators & Generators JavaScript Design Patterns →

WeakMap & WeakSet

Introduction to Weak Collections

WeakMap and WeakSet are special collections that hold "weak" references to their keys/elements. This means they don't prevent garbage collection of their contents, making them ideal for metadata storage without memory leaks.

Key Limitation: WeakMap keys and WeakSet values MUST be objects. Primitive values (strings, numbers, etc.) are not allowed.

1. WeakMap Basics

JavaScript Editor

WeakMap Methods:

set(key, value) - Add key-value pair
get(key) - Retrieve value
has(key) - Check existence
delete(key) - Remove entry

3. Garbage Collection Behavior

JavaScript Editor

The key difference from Map/Set is automatic cleanup when objects are no longer referenced.

5. Cache Implementation

JavaScript Editor

WeakMap is perfect for caching where cache should automatically clear.

7. Map vs WeakMap Comparison

JavaScript Editor

2. WeakSet Basics

JavaScript Editor

WeakSet Methods:

add(value) - Add object
has(value) - Check existence
delete(value) - Remove object

4. Practical Use Cases

JavaScript Editor

// 🔹 Practical Use Cases

// 1. Private Data Storage (with classes)
const privateData = new WeakMap();

class User {
  constructor(name, age) {
    // Store private data in WeakMap
    privateData.set(this, { name, age });
  }
  
  getName() {
    return privateData.get(this).name;
  }
  
  getAge() {
    return privateData.get(this).age;
  }
  
  // Private method simulation
  #privateMethod() {
    console.log('This is private');
  }
}

const user = new User('Alice', 30);
console.log(user.getName()); // 'Alice'
console.log(user.age); // undefined (private)
// privateData is automatically cleaned up when user is garbage collected

// 2. DOM Element Metadata
const domMetadata = new WeakMap();
const button = document.createElement('button');

domMetadata.set(button, {
  clickCount: 0,
  lastClicked: null
});

button.addEventListener('click', () => {
  const meta = domMetadata.get(button);
  meta.clickCount++;
  meta.lastClicked = new Date();
  console.log(`Clicked ${meta.clickCount} times`);
});

// When button is removed from DOM, metadata is automatically cleaned up

Perfect for private class data and DOM element metadata.

6. WeakSet Use Cases

JavaScript Editor

Great for tracking objects without preventing garbage collection.

When to Use Weak Collections

Use Case	Recommended Collection	Reason
Private class data	WeakMap	Automatic cleanup when instance is garbage collected
DOM element metadata	WeakMap	No memory leaks when elements removed from DOM
Object caching	WeakMap	Cache clears when objects no longer needed
Tracking processed objects	WeakSet	Automatic removal from tracking set
Circular reference prevention	WeakMap/WeakSet	Helps avoid memory leaks in complex object graphs
General data storage	Map/Set	When you need iteration, size, or primitive keys

← Iterators & Generators JavaScript Design Patterns →

Explore Related Tools

Hand-picked utilities and calculators related to this tool.

Related Tools

JavaScript Tutorial

WeakMap & WeakSet

Introduction to Weak Collections

1. WeakMap Basics

3. Garbage Collection Behavior

5. Cache Implementation

7. Map vs WeakMap Comparison

2. WeakSet Basics

4. Practical Use Cases

6. WeakSet Use Cases

When to Use Weak Collections

Explore Related Tools

Advanced JavaScript Projects

JavaScript Advanced Tutorial

Advanced Array Methods

Async Javascript

JavaScript Design Patterns

Es Modules Advanced

Follow Us

Our Tools

Our Company

Special Tools