What are WeakMap and WeakSet in JavaScript, and when would you use them over Map and Set?

Question

Interviewer asked:

> "We're building a monitoring tool that tracks DOM elements for performance metrics. Using a regular Map caused a memory leak when elements were removed from the page. How would you fix this?"

Interview OS Community · Accepted Answer

## The Problem with Map/Set

```javascript
const elementMetrics = new Map();

function trackElement(el) {
  elementMetrics.set(el, { renderTime: performance.now() });
}

// When element is removed from DOM:
element.remove();
// BUT the Map still holds a strong reference → element stays in memory!
```

## WeakMap to the Rescue

```javascript
const elementMetrics = new WeakMap();

function trackElement(el) {
  elementMetrics.set(el, { renderTime: performance.now() });
}

// When element is removed from DOM AND no other references exist:
element.remove();
// GC can free the element → WeakMap entry automatically disappears
```

## Key Differences

| Feature | Map | WeakMap |
|---------|-----|---------|
| Key types | Any value | Objects only |
| Garbage collection | Strong references (prevents GC) | Weak references (allows GC) |
| Iteration | `for...of`, `forEach()` | Not iterable |
| Size | `.size` property | No size property |
| Use case | General purpose | Metadata, caches, private data |

## Real-World Use Cases

### 1. Caching Expensive Computations
```javascript
const cache = new WeakMap();

function computeExpensive(obj) {
  if (cache.has(obj)) return cache.get(obj);
  const result = heavyComputation(obj);
  cache.set(obj, result);
  return result;
}
// Cache auto-cleans when obj is garbage collected
```

### 2. Private Data for Classes
```javascript
const privateData = new WeakMap();

class User {
  constructor(name, secret) {
    privateData.set(this, { secret });
    this.name = name;
  }
  getSecret() { return privateData.get(this).secret; }
}
// secret cannot be accessed from outside — truly private
```

### 3. DOM Event Tracking
```javascript
const handlers = new WeakMap();

button.addEventListener('click', () => { /* ... */ });
handlers.set(button, { clicks: 0, lastClick: null });
// When button is removed, tracking data auto-cleans
```

## WeakSet
Same principle but for sets — holds weak references to objects:
```javascript
const activeElements = new WeakSet();
// Track "active" state without preventing GC
```

Loading Application

What are WeakMap and WeakSet in JavaScript, and when would you use them over Map and Set?

Question Details

Suggested Solution

The Problem with Map/Set

WeakMap to the Rescue

Key Differences

Real-World Use Cases

1. Caching Expensive Computations

2. Private Data for Classes

3. DOM Event Tracking

WeakSet

Discussion (0)