Advanced Closures

Reviewed & published by Brayan K

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.

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.

What You'll Learn in This Lesson

• Lexical Environment structure
• Closure memory mechanics
• Block Scope vs Function Scope
• The Temporal Dead Zone (TDZ)
• Common closure memory leaks
• Real-world closure patterns (Module, Memoization)

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

• Download Node.js to run JavaScript on your computer
• Use your browser's Developer Console (Press F12) to test code snippets
• Create a .html file with <script> tags and open it in your browser

Understanding JavaScript's Scope System

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.

🔥 Lexical Environment — The Root of All JavaScript Behaviour

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

• Environment Record → where variables & functions live
• Outer Environment Reference → where it looks next if a variable isn't found
• This Binding (in function contexts)

Lexical Environment Example

let x = 10;

function show() {
    let y = 20;
    console.log(x + y);
}

show();

• A new Lexical Environment is created containing y.
• It has an outer reference to the global scope (where x lives).
• This is how JavaScript "finds" variables.

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

🔥 Block Scope vs Function Scope — Why This Matters in Real Apps

Function Scope

• function declarations
• function expressions
• arrow functions

function test() {
    var x = 1;
}
console.log(x); // error

Block Scope

Created by {} combined with let or const:

{
    let a = 5;
}
console.log(a); // error

Why does this matter?

Because incorrect scoping is one of the main causes of:

• inconsistent values
• race conditions
• wrong closures
• memory leaks
• stale data inside event listeners
• React useEffect infinite loops

🔥 Closure — A Function That Remembers the Past

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

Basic Closure Example

function counter() {
    let c = 0;
    return function() {
        c++;
        return c;
    };
}

const count = counter();
console.log(count()); // 1
console.log(count()); // 2

Why does it work?

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

• state management
• private variables
• event handler behaviour
• async callbacks
• function factories

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

🔥 Closures Used in Real Production-Level Code

1. Private State (common in frameworks)

function createStore() {
    let state = 0;

    return {
        get: () => state,
        set: (v) => state = v
    };
}

const store = createStore();
store.set(100);
console.log(store.get()); // 100

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

function debounce(fn, delay) {
    let timeout;

    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => fn(...args), delay);
    };
}

This uses closure to remember timeout.

3. Custom Iterators

function createIdGenerator() {
    let id = 0;
    return () => ++id;
}

A closure stores the last ID forever.

🔥 The Scope Chain — The Path JavaScript Uses to Find Variables

When JS tries to access a variable:

• It checks the current environment record
• Then the outer lexical environment
• Then the next…
• Until it hits global

Scope Chain Example

let a = 1;

function first() {
    let b = 2;

    function second() {
        let c = 3;
        console.log(a, b, c);
    }

    second();
}
first();

Scope chain order for second():

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

This is exactly how closures work.

🔥 Temporal Dead Zone — Why let/const Behave Differently

The TDZ is the period between:

• the start of the scope
• the actual declaration of the variable

console.log(a); // ❌ ReferenceError
let a = 10;

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

• accidental misuse
• undefined bugs
• silent logic errors

var does not have a TDZ:

console.log(a); // undefined
var a = 10;

This is why modern JS avoids var.

🔥 Real Bug From TDZ: Shadowed Variables

let x = 5;

function test() {
    console.log(x); // ❌ ReferenceError
    let x = 10;
}

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

🔥 Lexical Closures + Loops — Famous Interview Bug

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

Because all async callbacks close over the SAME i.

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

let creates a NEW lexical environment for each iteration.

🔥 Closures in Async Functions — Why This Confuses Beginners

function delayedLog() {
    for (let i = 1; i <= 3; i++) {
        setTimeout(() => console.log(i), i * 1000);
    }
}
delayedLog();

Each iteration gets its own lexical environment.

function delayedLog() {
    for (var i = 1; i <= 3; i++) {
        setTimeout(() => console.log(i), i * 1000);
    }
}

Because the closure captures one shared variable.

🔥 Massive Real-World Application: React Hooks Use Closures Internally

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

function useState(initial) {
    let value = initial;
    function get() { return value; }
    function set(v) { value = v; }
    return [get, set];
}

Every state value lives inside its own lexical environment.

🔥 Memory Leaks From Closures — What Causes Them

Closures hold onto variables even when not needed anymore.

function heavy() {
    const big = new Array(10000000);

    return function() {
        console.log("Hello");
    };
}

const fn = heavy();

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

Real apps leak memory when:

• event handlers capture large objects
• timeouts store references
• closures hold DOM nodes
• unused state persists in callbacks

Understanding lexical environments lets you avoid costly leaks.

🔥 Hoisting + Scope + Closures — The Hidden Interaction

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

• Hoist declarations, not initializations
• Create lexical environments before execution
• Mark let and const as "uninitialized" (TDZ)
• Pre-fill function declarations fully

Hoisting Example

console.log(a); // ❌ TDZ Error
console.log(b); // undefined
console.log(sum()); // works

let a = 10;
var b = 20;
function sum() { return a + b; }

Understanding this behaviour makes closure debugging 100× easier.

🔥 Lexical Environment Snapshots — The Rule Behind Every Closure

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

Snapshot Example

function createMessage(msg) {
    return function() {
        console.log("Message:", msg);
    };
}

const hi = createMessage("Hello");
hi(); // "Hello"

Even if msg is changed later:

let hi2 = createMessage("A");
hi2(); // A
hi2 = createMessage("B");
hi2(); // B

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

🔥 Closures Inside Objects — Not the Same as "this"

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

function createUser(name) {
    return {
        say() { console.log(name); }
    };
}

const u = createUser("Boopie");
u.say(); // "Boopie"

• name is stored via closure
• this is irrelevant

function User(name) {
    this.name = name;
    this.say = function() {
        console.log(this.name);
    };
}

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

🔥 Deep Closure Pattern — Function Factory with Internal State

A powerful closure concept used in real apps:

function createBankAccount() {
    let balance = 0;

    return {
        deposit(amount) {
            balance += amount;
        },
        withdraw(amount) {
            balance -= amount;
        },
        getBalance() {
            return balance;
        }
    };
}

const acc = createBankAccount();
acc.deposit(100);
console.log(acc.getBalance()); // 100

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

🔥 Recursion + Closures — Understanding How Scopes Stack

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

function adder() {
    let total = 0;

    function add(n) {
        if (n <= 0) return total;
        total += n;
        return add(n - 1);
    }

    return add;
}

const sum = adder();
console.log(sum(5)); // 15

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

🔥 Asynchronous Closures — The Hardest Concept for Beginners

Async functions create closures too.

function loadUser() {
    let name = "loading...";

    fetch("/api/user").then(res => res.json()).then(data => {
        name = data.name;
    });

    return function() {
        console.log("User:", name);
    };
}

const user = loadUser();
setTimeout(() => user(), 2000);

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

This is exactly how:

• React async updates
• Node.js callbacks
• Event handlers
• database queries

🔥 Closure Debugging Tip — Logging the Environment Too Early Is Misleading

Example that confuses learners:

function example() {
    let x = 0;

    setTimeout(() => console.log(x), 1000);

    x = 10;
}
example();

Closures keep references, not copies.

🔥 How Closures Cause Memory Leaks in Real Apps

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

function attachHeavyEvent() {
    let big = new Array(10000000).fill("data");

    document.addEventListener("click", function() {
        console.log("Hi");
    });
}

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

function attachSafeEvent() {
    document.addEventListener("click", () => {
        console.log("Hi");
    });
}

Now nothing large is captured.

🔥 Closures + Module Pattern — How Real Libraries Secure Their Internals

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

const CounterModule = (function () {
    let value = 0;

    function increment() { value++; }
    function decrement() { value--; }
    function get() { return value; }

    return { increment, decrement, get };
})();

This is still used in:

• old jQuery plugins
• legacy Node.js tooling
• browser extensions
• embedded scripts

Modules exist because closures made them possible to begin with.

🔥 Memoization — Closures for High-Performance Functions

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

function memoize(fn) {
    const cache = {};

    return function (n) {
        if (cache[n]) return cache[n];
        const result = fn(n);
        cache[n] = result;
        return result;
    };
}

const slowFib = n => n <= 1 ? n : slowFib(n-1) + slowFib(n-2);
const fastFib = memoize(slowFib);

console.log(fastFib(35));

• React state derivation
• AI computations
• Data science
• Backend caching
• Heavy calculations
• Canvas/WebGL apps

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

🔥 Throttling & Debouncing — Closures Power Every Search Bar & UI Input

Debounce:

function debounce(cb, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => cb(...args), delay);
    };
}

Throttle:

function throttle(cb, limit) {
    let waiting = false;
    return function (...args) {
        if (!waiting) {
            cb(...args);
            waiting = true;
            setTimeout(() => waiting = false, limit);
        }
    };
}

• search input
• scroll tracking
• window resizing
• live analytics
• chat/messaging rate limits

All of them work because closures store timers & state.

🔥 Event Emitters — Node.js Relies on Closure-Based State

A basic EventEmitter implementation:

function createEmitter() {
    const events = {};

    return {
        on(event, handler) {
            if (!events[event]) events[event] = [];
            events[event].push(handler);
        },
        emit(event, data) {
            (events[event] || []).forEach(fn => fn(data));
        }
    };
}

const bus = createEmitter();
bus.on("hello", msg => console.log(msg));
bus.emit("hello", "Hi from closure!");

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

🔥 Closure + Currying — Advanced Functional Programming

Currying relies entirely on closures.

function multiply(a) {
    return function(b) {
        return function(c) {
            return a * b * c;
        };
    };
}

console.log(multiply(2)(3)(4)); // 24

Each nested function receives its own lexical environment.

🔥 Factory Functions — Alternative to Classes Using Closures

function createUser(name, age) {
    let score = 0;

    return {
        name,
        age,
        addScore() { score++; },
        getScore() { return score; }
    };
}

const u = createUser("Boopie", 16);

// 🎯 YOUR TURN — replace each ___ using the hint beside it.

function makeCounter(start) {
  // 1) This variable outlives the call, because the returned functions hold it.
  ___ count = start;                     // 👉 replace ___ with let
  return {
    increment() { count += 1; return count; },
    peek() { return count; },
  };
}

// 2) Each call makes its OWN count. They do not share one.
const a = makeCounter(10);
const b = ___(100);                      // 👉 replace ___ with makeCounter
console.log(a.increment(), a.increment(), b.increment());
console.log("a sees", a.peek(), "and b sees", b.peek());

const handlers = [];
// 3) var is function-scoped, so all three closures share ONE i — which is 3
//    by the time any of them runs.
for (___ i = 0; i < 3; i++) handlers.push(() => i);   // 👉 replace ___ with var
console.log("var captured:", handlers.map((h) => h()));

const better = [];
// 4) let is block-scoped: a fresh binding per turn of the loop.
for (___ j = 0; j < 3; j++) better.push(() => j);     // 👉 replace ___ with let
console.log("let captured:", better.map((h) => h()));

function once(fn) {
  let called = false;
  let result;
  return (...args) => {
    // 5) The remembered flag is what makes this run one time only.
    if (!___) { called = true; result = fn(...args); }   // 👉 replace ___ with called
    return result;
  };
}
const init = once((n) => { console.log("running init"); return n * 2; });
console.log(init(21), init(99));

// ✅ Expected output:
// 11 12 101
// a sees 12 and b sees 101
// var captured: [ 3, 3, 3 ]
// let captured: [ 0, 1, 2 ]
// running init
// 42 42

Factories are used everywhere:

• Vue 3 Composition API
• Node.js utilities
• Serverless handlers
• Backend routing logic

🔥 Closure Performance — When Overusing Closures Slows You Down

• memory (environment objects)
• slower creation time
• huge nested closures
• closures inside large loops
• storing data-heavy objects in closures

🔥 Closure Debugging Checklist

When closures behave unexpectedly, check:

• Are you capturing a reference or a value?
• Is the variable mutated after closure creation?
• Are you shadowing identifiers?
• Is async delaying access to the variable?
• Does the closure accidentally store large objects?
• Is a loop using var instead of let?

Key Takeaways

• Lexical environments are the foundation of JavaScript's scope system
• Closures preserve lexical environments even after functions finish
• Block scope (let/const) creates new environments per iteration
• The Temporal Dead Zone prevents using variables before initialization
• Scope chain determines variable lookup order
• Closures power React hooks, private state, and memoization
• Memory leaks happen when closures capture large objects unnecessarily
• Debouncing/throttling rely on closures for timer management
• Factory functions use closures as an alternative to classes
• Understanding closures is essential for async programming and event handlers

Practice quiz

Continue this course

• Previous: Deep Dive into JavaScript Execution Context & Call Stack
• Next: Event Loop, Microtasks & Async Internals — How the event loop, task queue, and microtask queue work together
• Quick reference: JavaScript cheat sheet