Master JavaScript Closures: Unlock Private and Public Scopes

JavaScript closures provide great convenience for developers; they feel natural enough that many use them without fully understanding the concept.

To grasp closures you first need to know JavaScript variable scope, which consists of global and local variables. A function can access variables defined outside of it, but code outside the function cannot access the function’s internal variables.

Reading a local variable from outside is achieved by defining a nested function inside the outer function; the inner function can access the outer variable, and the outer function returns this inner function, allowing external code to reach the local variable.

What is a closure? A closure is a bridge that connects the inner and outer scopes of a function, allowing external code to access variables defined inside the function. In essence, a closure is “a function defined inside another function.” The inner function retains a copy of the variables from its parent scope, and these variables persist in memory even after the parent scope finishes execution.

Closure application examples

(1) Implementing public and private scope control

Because a closure can expose internal variables, it can be used to create public/private-like scopes.

(2) Adding DOM events inside a loop

When attaching click events to multiple input fields, a common mistake is that the loop variable’s final value is captured, causing every handler to reference the same (last) item.

The correct approach uses a closure: each iteration creates a new inner function that captures the current loop variable, preserving its value for the event handler.

This works because the closure saves the parent variable in its own scope, ensuring each click handler accesses the appropriate data.