Master JavaScript Closures: Clear Explanation of Scope Chains and Real-World Uses

When I first learned JavaScript, closures caused many dead‑ends, so I decided to revisit the fundamentals and present a clear, comprehensive guide to closures—a topic that frequently appears in front‑end interviews.

Scope and Scope Chain

Before diving into scope chains, you should already understand basic data types, memory, garbage collection, execution contexts, and variable/activation objects.

Scope is a set of rules that determines how the engine looks up identifiers (variables or function names) in the current and nested scopes.

Identifiers refer to variable names or function names.

JavaScript has only global scope and function scope (eval is rarely used).

Scope and execution context are distinct concepts and must be carefully differentiated.

The JavaScript execution process consists of a compilation phase (where scope rules are established) and an execution phase (where execution contexts are created).

The scope chain is created during the execution‑context creation phase, linking the current environment with its outer environments.

It is a one‑directional chain of variable objects that allows the current execution environment to access identifiers from outer scopes.

For illustration, consider the following example (images omitted for brevity): the global context,

test

function, and

innerTest

function each have their own variable objects, and

innerTest

's scope chain contains all three.

Closures

For developers with some JavaScript experience but no solid grasp of closures, mastering this concept can feel like a rebirth, dramatically boosting your skill level.

Closures are tightly linked to scope chains and are formed during function execution.

Definition: A closure occurs when a function remembers and can access its lexical scope (excluding the global scope) even after that outer function has finished executing.

In simple terms, if function A is defined inside function B and accesses a variable from B , then B creates a closure.

Because JavaScript has automatic garbage collection, a function’s execution context is usually reclaimed after it finishes. However, a closure retains references to its outer variable objects, preventing their collection.

Example:

When

foo()

finishes, its execution environment would normally be discarded, but assigning

fn = innerFoo

to a global variable keeps

innerFoo

(and thus

foo

's variable object) alive, allowing

fn

to access the retained variable

a

.

foo(); // creates closure

Thus

foo

can be considered a closure.

The following diagram (image omitted) shows the closure’s scope chain as observed in Chrome DevTools.

For details on observing closures in Chrome and more examples, see the “Fundamentals (6)” article.

Closure Use Cases

1. Delayed Execution with setTimeout

When a function is passed to

setTimeout

, the callback remains referenced inside the timer’s variable object, preventing it from being garbage‑collected until the timer fires.

2. Currying

Closures enable functional programming techniques such as currying, allowing functions to be partially applied and remembered across calls.

3. Module Pattern

Modules are a powerful application of closures. By using an immediately‑invoked function expression (IIFE), you can expose public methods (e.g.,

add

) while keeping internal variables (

a

,

b

) private. This pattern underpins many design patterns in JavaScript.

Below is a classic interview question that tests understanding of closures and loops:

Use a closure to modify the code so that a loop prints 1, 2, 3, 4, 5 sequentially.

Click the provided link for a detailed solution.

Understanding closures is essential for front‑end development and interview success; feel free to ask questions in the comments.