How does JavaScript manage memory and how do leaks happen?

Question

Accepted Answer

JavaScript uses **automatic garbage collection**. The collector uses a **mark-and-sweep** algorithm: starting from roots (global object, the current call stack), it marks everything **reachable**, then frees everything unreachable. You never `free()` manually — but you *can* accidentally keep references alive, causing leaks.

## The four classic leak sources

```js
// 1. Unbounded globals / caches that never shrink
window.cache = window.cache || {};
window.cache[id] = bigObject; // grows forever

// 2. Forgotten event listeners
el.addEventListener("click", handler);
// must call el.removeEventListener("click", handler) when done

// 3. Forgotten timers
const id = setInterval(tick, 1000);
// must clearInterval(id)

// 4. Closures capturing large objects longer than needed
function outer() {
  const huge = new Array(1e6);
  return () => huge.length; // keeps `huge` alive as long as the closure lives
}
```

A reference from any reachable place (a global, a live listener, a closure, a detached DOM node still referenced in JS) keeps an object from being collected.

## Diagnosing leaks

```js
performance.memory; // rough heap size (Chrome)
// Chrome DevTools → Memory → take heap snapshots at two points and compare
```

Take heap snapshots before/after an action; a steadily growing "retained size" reveals what's not being freed.

## Tools to avoid pinning objects

```js
const meta = new WeakMap(); // keys are weakly held — GC can collect them
meta.set(domNode, data);    // doesn't prevent domNode from being garbage-collected
```

## Why it matters

Long-running apps (SPAs, Node servers) crash or slow down from leaks.

The fixes are disciplined cleanup — remove listeners/timers, bound caches (LRU), avoid lingering references, and use `WeakMap`/`WeakSet` for metadata that shouldn't keep objects alive.