What is a closure in JavaScript?

A closure is not special syntax. It is what happens when a function is defined inside another function or block and that inner function is used after the outer scope has finished executing. JavaScript uses lexical scoping: a function's variable lookup is decided by where it is written, not where it is called. Because the inner function still references the outer binding, the engine keeps that environment alive instead of discarding it.

function createCounter(start = 0) {
  let count = start;
  return {
    increment: () => ++count,
    read: () => count,
  };
}

const counter = createCounter(10);
counter.increment();
counter.increment();
console.log(counter.read()); // 12

count is not exposed on the returned object and cannot be reached from outside. The only way in is through the two functions, which share the same captured binding.

Where closures show up

• Private state and the module pattern
• Event handlers and callbacks that need context from where they were created
• Memoization caches and factories such as once(), debounce() or throttle()
• React components, where each render closes over that render's props and state

The classic follow-up is the loop gotcha. A var loop has one shared binding, so every callback sees the final value. let creates a fresh binding per iteration.

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 3, 3, 3
}

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 0, 1, 2
}

Common mistakes

• "A closure copies the value when it is created." It captures the binding, so later mutations are visible.
• "Closures only exist in arrow functions." Any function can close over its lexical scope.
• "Closures keep the entire outer scope alive." In practice they retain what is referenced; engines optimise the rest.
• Confusing closure with this. A closure captures variables; this is a separate binding decided at the call site.