JS WeakMap & WeakSet: A Clear Guide

JavaScript has special variables called WeakMap and WeakSet. They are different from Map and Set. They help with memory management.

Normal Map and Set hold strong references. This can cause memory leaks. WeakMap and WeakSet use weak references.

This means if an object has no other references, it can be garbage collected. The WeakMap or WeakSet will not stop that.

Let's explore these variables in detail. We will see how they work and when to use them.

What is a WeakMap?

A WeakMap is a collection of key-value pairs. The keys must be objects. The values can be any type.

The key is held weakly. If the key object is deleted from memory, the entry is removed from the WeakMap.

You cannot iterate over a WeakMap. You cannot get its size. This is because the contents can change at any time.

WeakMap Methods

WeakMap has only four methods:

• set(key, value) – Adds a new element.
• get(key) – Returns the value for a key.
• has(key) – Checks if a key exists.
• delete(key) – Removes an element.

There is no clear() method. There is no size property.

WeakMap Example

Let's see a simple example. We will use an object as a key.

 
// Create a WeakMap
let wm = new WeakMap();

// Create an object key
let objKey = { id: 1 };

// Set a value
wm.set(objKey, 'secret data');

// Get the value
console.log(wm.get(objKey)); // Output: secret data

// Check if key exists
console.log(wm.has(objKey)); // Output: true

// Delete the key
wm.delete(objKey);
console.log(wm.has(objKey)); // Output: false

Output:
secret data
true
false

Notice how we used an object as the key. If we set objKey = null, the entry would be removed.

What is a WeakSet?

A WeakSet is a collection of objects. It behaves like a Set, but with weak references.

Only objects can be added to a WeakSet. Primitive values like numbers or strings are not allowed.

Like WeakMap, you cannot iterate over a WeakSet. You cannot check its size.

WeakSet Methods

WeakSet has only three methods:

• add(value) – Adds a new object.
• has(value) – Checks if an object exists.
• delete(value) – Removes an object.

There is no clear() method. There is no size property.

WeakSet Example

Here is a simple example. We add objects to a WeakSet.

 
// Create a WeakSet
let ws = new WeakSet();

// Create objects
let objA = { name: 'Alice' };
let objB = { name: 'Bob' };

// Add objects
ws.add(objA);
ws.add(objB);

// Check if objects exist
console.log(ws.has(objA)); // Output: true
console.log(ws.has(objB)); // Output: true

// Delete an object
ws.delete(objA);
console.log(ws.has(objA)); // Output: false

Output:
true
true
false

If we set objB = null, the object would be garbage collected. The WeakSet would automatically remove it.

Why Use WeakMap and WeakSet?

The main reason is memory management. Normal Map and Set can cause memory leaks.

Imagine you have a cache. You store temporary data for DOM elements. If you remove a DOM element, you want the cache data to be removed too.

With a Map, the DOM element is still referenced. The garbage collector cannot remove it. This is a memory leak.

With a WeakMap, the reference is weak. When the DOM element is removed, the entry is gone. Memory is freed.

This makes WeakMap and WeakSet perfect for private data, caching, and DOM metadata.

Use Cases for WeakMap

WeakMap is great for storing private data. You can attach data to an object without modifying it.

For example, you can store a user's session data. The key is the user object. The value is the session token.

Another use case is caching. You can cache computed results for objects. When the object is gone, the cache is cleared.

Learn more about JavaScript Variable Scope Explained to understand how variables interact with closures.

Use Cases for WeakSet

WeakSet is useful for marking objects. You can track if an object has been processed.

For example, you can use a WeakSet to check if a DOM element has an event listener. If the element is removed, the WeakSet entry is gone.

This prevents memory leaks in large applications.

Check out Types of JavaScript Variables for a broader view of variable types.

WeakMap vs Map

Here are the key differences:

• Keys: WeakMap keys must be objects. Map keys can be any type.
• References: WeakMap uses weak references. Map uses strong references.
• Iteration: WeakMap is not iterable. Map is iterable.
• Size: WeakMap has no size property. Map has a size property.
• Garbage Collection: WeakMap allows garbage collection. Map does not.

WeakSet vs Set

Here are the key differences:

• Values: WeakSet only accepts objects. Set accepts any value.
• References: WeakSet uses weak references. Set uses strong references.
• Iteration: WeakSet is not iterable. Set is iterable.
• Size: WeakSet has no size property. Set has a size property.
• Garbage Collection: WeakSet allows garbage collection. Set does not.

Important Notes

WeakMap and WeakSet are not for general use. They are for specific memory-sensitive cases.

Do not use them if you need to iterate over data. Use Map or Set instead.

Also, always use objects as keys for WeakMap. Primitive values will cause an error.

For more details on variable handling, see the JavaScript Variable Coercion Guide.

Conclusion

WeakMap and WeakSet are powerful tools. They help you avoid memory leaks in JavaScript.

Use WeakMap for private data and caching. Use WeakSet for marking objects.

Remember, they use weak references. This allows garbage collection to work properly.

Always choose the right tool for the job. For most cases, Map and Set are fine. For memory-sensitive tasks, use WeakMap and WeakSet.