Garbage Collection

Give every object a counter of incoming references and free it when the counter hits zero. Simple and prompt — and it leaks. Build two objects that point at each other with no root pointing at either: each has a count of one, so a reference counter never frees them, even though nothing in your program can reach them. A tracing collector starts from the roots, never reaches the island, and sweeps it. Reachability sees a truth a local count cannot — which is exactly why real engines trace instead of count.

Decades of measurement gave one robust rule: most objects die young. The temporary array in a loop, the request object, the intermediate string — born and abandoned within milliseconds. A handful live for the whole program. Generational GC exploits this by splitting the heap:

Scanning the small, high-death young space most of the time — and the whole heap seldom — is the trick that keeps real apps responsive.

A minor GC traces only the young generation. It's frequent and fast, reclaiming the many short-lived corpses cheaply while promoting the few survivors. A major GC traces the entire heap including the old generation — far rarer and more expensive. To stay correct, a minor GC also follows a remembered set: the old→young references, so an old object pointing into Eden still keeps its young target alive without scanning all of old space.

A leak in a GC language is not lost memory — it's memory still rooted by accident. The classic culprit is a listener you never remove: its closure pins everything it captured for as long as the target lives.

// A "leak" in a GC language = something still reachable by accident.
function mount() {
  const huge = new Array(1e6).fill(0);

  // the handler closure captures `huge` — and never lets go
  window.addEventListener('resize', () => use(huge));
} // mount() returns, but `huge` stays rooted by the live listener

// Fix: keep a handle, then drop it so no root reaches the closure.
const onResize = () => use(huge);
window.addEventListener('resize', onResize);
window.removeEventListener('resize', onResize); // now collectable

The same shape recurs everywhere: stray setInterval callbacks, closures over big data, detached DOM nodes still held in a variable or array, and ever-growing global caches. The fix is always identical — drop the reference so no root reaches the object.

A normal Map or array is a strong root: anything it holds is pinned. When you want to associate data with an object without keeping that object alive, reach for a WeakMap — it holds its keys weakly, so the key's reachability elsewhere decides liveness, and the entry is collected automatically once the key is unrooted.

// A strong Map is a root: every key it holds is pinned forever.
const strong = new Map();
strong.set(node, meta);   // `node` can now never be collected

// A WeakMap holds its keys weakly — the KEY's reachability decides.
const weak = new WeakMap();
weak.set(node, meta);     // when `node` is unrooted elsewhere,
                       // this entry is swept automatically

The simplest collector is stop-the-world: pause all JS, mark, sweep, resume. Correct, but a long pause janks the frame. Real engines mark incrementally, interleaving small slices of marking with your code, using the tri-color abstraction — white (unreached), gray (reached, children pending), black (done). A write barrier catches the dangerous case where running code points a black object at a white one mid-mark, re-graying it so nothing live is wrongly swept.