🔒Closures

A closure is created when a function remembers and can access variables from its outer (lexical) scope, even after the outer function has finished execution.

In simple terms: a function "closes over" the variables it needs.

Closures exist to:

• Preserve state across function calls
• Encapsulate data (create private variables)
• Enable callbacks and async operations to access outer variables

Without closures, JavaScript would struggle with:

• Async code (timers, promises, event handlers)
• Modular, reusable logic
• Data privacy

• JavaScript uses lexical scoping
• When a function is defined, it forms a scope chain
• If an inner function references variables from its outer scope, JavaScript keeps those variables in memory
• The inner function carries a reference to this scope → closure

Key point: Closures store references, not copies.

js
function outer() {
  let x = 10;
  return function inner() {
    return x; // closure over x
  };
}
const fn = outer();
fn(); // 10 (outer() already finished!)

• Debounce / throttle implementations — timer variable lives in outer function
• Event handlers — access to outer state
• Callbacks in async code — preserve context
• Module pattern — private variables
• React hooks — useState/useEffect capture outer scope

js
function makeCounter() {
  let count = 0;
  return {
    increment: () => ++count,
    decrement: () => --count,
    value: () => count,
  };
}

Closures are powerful, but:

• ❌ Can cause memory leaks if references are not cleaned
• ❌ Harder to debug when overused
• ❌ Long-lived closures can retain large objects in memory
• ❌ Can lead to unexpected behavior if variables are mutated

Especially risky with event listeners, intervals, and global closures.

Closures capture variables, not values.

js
// With var — BUG
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (shared i ends at 3)

// With let — FIXED
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2 (fresh binding per iteration)

let creates a new binding per iteration, var does not.

js
function attachHandler() {
  const bigData = new Array(1_000_000);
  button.addEventListener('click', () => {
    console.log('clicked'); // bigData captured but unused!
  });
}

Even though bigData isn't used, it stays in memory because the closure captures the whole scope.

Fix: Nullify unused references or remove event listeners in cleanup.