How can closures cause memory retention problems?

Short Interview Answer

A long-lived function keeps its closed-over environment alive, so large objects referenced there cannot be garbage-collected.

Detailed Explanation

If a callback, event listener, or exported function closes over a large object (DOM nodes, caches, buffers), that object stays reachable. Detached DOM trees retained via closures are a classic leak pattern. Fixes: null out references when done, remove listeners, close over only needed primitives/ids, use WeakMap for associated data, and avoid capturing entire component instances when a small subset suffices. DevTools heap snapshots showing retainer paths through context objects help confirm the issue.

Example

function attach(el) {
  const huge = new Array(1e6).fill('*');
  el.addEventListener('click', () => {
    console.log(huge[0]); // retains huge for listener lifetime
  });
}

Interview Tip

Tie the answer to event listener lifecycle — very practical.

Common Mistake

Saying 'closures always leak memory' — retention only matters while the closure remains reachable.