Advanced Closures

A closure is a function bundled together with the variables from the scope where it was created, letting it remember and keep accessing those variables even after that outer function has finished running.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

Advanced Scope, Closures & Lexical Environments

Master JavaScript's scope system, closures, and lexical environments to become a top 1% developer.

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

JavaScript's scope system is one of the most misunderstood parts of the entire language, especially once you combine closures, async execution, event handlers, and nested functions. Understanding lexical environments is the real key to mastering how JavaScript stores variables, how functions remember old values, how async code captures state, and how real-world bugs like stale data, memory leaks, or broken loops happen.

This lesson will turn you into the top 1% of JS developers by teaching how variables live, die, and evolve inside the engine.

Every time JavaScript runs a block, function, or script, it creates a Lexical Environment . It contains three things:

This is lexical scoping — meaning variables are resolved based on where code is written, not where it's called.

Function Scope

Block Scope

Created by {' '} combined with let or const :

Why does this matter?

Because incorrect scoping is one of the main causes of:

A closure is created whenever a function captures variables from an outer lexical environment even after that environment is gone.

Because the inner function remembers the variable c from the lexical environment of counter() even though counter() already finished executing.

Closures are not "magic" — they are simply preserved lexical environments.

1. Private State (common in frameworks)

2. Debouncing / Throttling (used in UI + API calls)

3. Custom Iterators

If b doesn't exist in second() , JavaScript climbs up.

Because let and const exist in lexical environment but cannot be used before initialization.

Even though global x exists, the block-scoped x "shadows" it, causing TDZ.

Because all async callbacks close over the SAME i .

let creates a NEW lexical environment for each iteration.

Each iteration gets its own lexical environment.

Because the closure captures one shared variable.

React's useState uses closures to maintain values across renders:

Every state value lives inside its own lexical environment.

Closures hold onto variables even when not needed anymore.

big stays in memory because the closure keeps the environment alive.

Understanding lexical environments lets you avoid costly leaks.

Hoisting isn't just about "moving variables to the top." It interacts directly with lexical environments.

Understanding this behaviour makes closure debugging 100× easier.

A closure captures the lexical state when the function is created, not when it is later executed.

Each closure keeps its own snapshot of msg . This is why closures feel like they store memories.

Closures capture variables in lexical scope. this depends on how a function is called.

This one uses this , not closure. Learning the difference is critical for: React classes, Node.js services, Event handlers, Constructor patterns.

A powerful closure concept used in real apps:

This is true private data — not accessible from the outside. Closures enable data encapsulation without classes.

Recursive functions create new execution contexts every call. But shared variables still live in outer lexical environments:

Each recursive call creates a new function context but the closure stores the shared state.

Even after loadUser() finishes, the returned function keeps the lexical environment alive.

Closures keep environment records alive. If a large object is captured inside a closure that lives forever, memory leaks.

Because the closure references the lexical environment, big never gets garbage-collected.

Before ES modules existed, developers used closures to encapsulate logic:

Modules exist because closures made them possible to begin with.

Memoization caches results using closures and can reduce expensive computation costs dramatically.

The closure keeps cache alive and invisible to the outside world.

Debounce:

Throttle:

All of them work because closures store timers & state.

The emitter's internal event registry lives inside a closure.

Each nested function receives its own lexical environment.

Practice quiz

• Browse all free courses
• Cheat sheets & quizzes
• Coding dictionary