What is a Closure in JavaScript?

A closure is one of JavaScript’s most powerful yet misunderstood concepts. Simply put, a closure allows a function to remember and access its lexical scope (variables from its parent function) even after the parent function has finished executing.

How Closures Work

Closures are created when:

1. A function is defined inside another function (nested function).
2. The inner function retains access to the outer function’s variables, even after the outer function returns.

Example:

function outer() {
  let count = 0; // Outer function's variable
  
  function inner() { // Inner function (closure)
    count++;
    console.log(count);
  }
  
  return inner;
}

const counter = outer();
counter(); // Output: 1
counter(); // Output: 2

Here, inner() "closes over" the count variable, preserving it between calls.

Why Are Closures Useful?

1. Data Privacy – Encapsulate variables to avoid global scope pollution.
2. Stateful Functions – Create functions with "memory" (e.g., counters, event handlers).
3. Currying & Higher-Order Functions – Enable functional programming patterns.

Common Use Cases

• Module Pattern (Private variables):

  const createUser = () => {
    let name = "Anonymous";
    return {
      getName: () => name,
      setName: (newName) => (name = newName),
    };
  };
  const user = createUser();
  console.log(user.getName()); // "Anonymous"
  

• Event Handlers & Callbacks:

  function onClick(color) {
    return function() {
      document.body.style.backgroundColor = color;
    };
  }
  const blueButton = onClick("blue");
  button.addEventListener("click", blueButton);
  

Interview Question:

Q: What’s logged here?

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 4, 4, 4 (Why? How to fix?)

A: Use let (block scope) or an IIFE to create a new scope per iteration.