What is a closure in JavaScript, and can you give a practical example of using one?

Question

Accepted Answer

A closure is a function that remembers the variables from the scope where it was created, and keeps access to them even after that outer function has finished running.

The mechanism is simpler than the definition sounds. When you declare a function inside another function, the inner function keeps a reference to its outer scope. Normally, when a function returns, its local variables become eligible for garbage collection. But if an inner function still references them, they stay alive. That surviving link is the closure.

A small example makes it concrete. A counter function declares a local variable count, then returns an inner function that increments and returns it. Each time you call the returned function you get one, two, three. The count variable is not global, nothing outside can touch it, yet it persists between calls because the returned function closes over it.

The practical uses come up constantly. Private state is the classic one: a factory function can expose only the operations you want while keeping the data unreachable from outside, which is how module patterns worked before ES modules. Function factories are another, where you build a specialised function by capturing a configuration value, such as a multiplier or a base URL. Debounce and throttle both rely on a closure to hold the timer id between calls. Every callback passed to setTimeout, an event listener, or an array method is a closure over the surrounding scope. And in React, every event handler and effect you write closes over the props and state from the render in which it was created.

That last point is where closures stop being trivia and start causing bugs. A stale closure happens when a callback captures a value from an old render and keeps using it. The common version is an interval set up in an effect with an empty dependency array that reads state: it captured the first render's state and will read the same value forever. The fix is either the functional form of the setter, which does not need the captured value, or listing the dependency so the effect recreates the closure.

The other classic trap is a var declaration inside a loop that creates callbacks. Because var is function-scoped, every callback closes over the same variable and they all see the final value. Using let, which is block-scoped, gives each iteration its own binding and fixes it.

The mental model worth keeping is that a closure captures the variable, not a snapshot of its value at that moment.