Closures and Scope

Reviewed & published by Brayan K

A clear, in-depth guide to closures in JavaScript — with worked examples, common pitfalls, and a practice quiz.

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.

What You'll Learn in This Lesson

• Understand lexical scope vs dynamic scope
• How functions 'remember' variables
• Create private variables and encapsulation
• Function factories and currying
• Common closure pitfalls (loops)
• Real-world use cases in modern apps

💡 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

🎒 Real-World Analogy: A closure is like a backpack that remembers:

• • When a function is created, it packs a "backpack" with all the variables around it
• • Even when the function travels far away (like being passed to another function), it carries its backpack
• • The function can always reach into its backpack and use those remembered variables
• • This is how functions "remember" data even after their parent function has finished!

INTRODUCTION — Why Closures Matter More Than Anything Else in JavaScript

Closures are the heart and soul of JavaScript.

• Private variables
• Function factories
• Event handlers
• State management
• Asynchronous behavior
• Module patterns
• Encapsulation
• Secure data control

Every professional JavaScript developer — especially those working in React, Node.js, or complex web apps — uses closures every single day, often without noticing.

By the end of this lesson, closures will feel completely natural.

SECTION 1 — Understanding SCOPE (Global, Function, Block, Lexical)

Before closures make sense, you MUST understand scope.

Scope = where variables can be accessed.

JavaScript uses Lexical Scope, meaning:

📌 Variables are resolved based on WHERE the code was written, not where it is executed.

1. Global Scope

Anything declared outside a function is global.

Accessible everywhere. Dangerous for large apps.

2. Function Scope

var variables live inside the function only.

Function boundaries matter a lot in closures.

3. Block Scope (let / const)

Block scoping is essential for fixing closure bugs (you'll see later).

4. Lexical Scope (Most Important)

Inner functions access variables declared where they were written.

Lexical scope is the engine behind closures.

SECTION 2 — What Is a Closure? (Simple Definition)

A function that "remembers" variables from its outer scope — even after the outer function has returned.

This is the single most important concept in JavaScript.

The Classic Example:

Even though outer() has finished executing, the inner function keeps access to:

• inner scopes

Closures keep data alive.

SECTION 3 — The Real Superpower: Private Variables

JavaScript has no private keyword (until ES2020 classes). Before that, closures were the ONLY way to hide data.

Example: Private Counter

This is true encapsulation — impossible with global variables.

SECTION 3b — Worked Example: A Wallet With a Private Balance

Here is the counter idea turned into something you would actually ship. Read the whole program first — every non-obvious line has a comment telling you what it does and why — then press Run and check the output matches the comments.

The thing to watch for: createWallet finishes running on the line where you call it, yet balance is still alive several lines later. That is the closure doing its job.

// -- WORKED EXAMPLE - a closure you can watch working --

function createWallet(ownerName, startingBalance) {
  // 'balance' is PRIVATE: it lives inside createWallet and nothing outside
  // this function can reach it directly. Only the functions below can.
  let balance = startingBalance;

  // Each function below is written INSIDE createWallet, so each one packs a
  // "backpack" holding ownerName and balance. That backpack is the closure.
  return {
    deposit(amount) {
      balance = balance + amount;              // reaches into the backpack
      return ownerName + " deposited " + amount + ". Balance: " + balance;
    },
    withdraw(amount) {
      if (amount > balance) {                  // guard: never go negative
        return "Declined - " + ownerName + " only has " + balance;
      }
      balance = balance - amount;
      return ownerName + " withdrew " + amount + ". Balance: " + balance;
    },
    getBalance() {
      return balance;                          // read-only view of the private value
    }
  };
}

// createWallet() runs once and FINISHES on this line...
const wallet = createWallet("Ada", 100);
// ...but 'balance' stays alive, because the three returned functions remember it.

console.log(wallet.deposit(50));     // Ada deposited 50. Balance: 150
console.log(wallet.withdraw(30));    // Ada withdrew 30. Balance: 120
console.log(wallet.withdraw(999));   // guard fires, balance is left alone

// The private variable really is unreachable from outside:
console.log(wallet.balance);         // undefined - there is no 'balance' property
console.log(wallet.getBalance());    // 120 - the only legitimate way to read it

// Every call to createWallet builds a BRAND NEW backpack, not a shared one:
const wallet2 = createWallet("Grace", 10);
console.log(wallet2.getBalance());   // Grace's own balance
console.log(wallet.getBalance());    // Ada's is untouched

// Expected output:
// Ada deposited 50. Balance: 150
// Ada withdrew 30. Balance: 120
// Declined - Ada only has 120
// undefined
// 120
// 10
// 120

Try breaking it on purpose: change let balance to const balance and run again. You get TypeError: Assignment to constant variable. — proof that deposit really is writing to the outer variable, not to a copy.

SECTION 4 — Function Factories (Closures Generating Functions)

Closures let you preload data into functions.

Make a Function That Remembers a Number (Multiplier):

• dynamic validators
• React hook generators
• custom loggers
• configuration wrappers
• dependency injection

🎯 Your Turn — Finish the Closures

Everything below is written for you except two blanks. Both blanks are about the one idea this lesson teaches: an inner function reaching a variable from the function that created it. Fill them in and press Run.

// 🎯 YOUR TURN - fill in the blanks marked ___

// PART 1 - a function factory
function makeLogger(label) {
  // The function you return is written INSIDE makeLogger, so it can remember
  // 'label' forever - even after makeLogger has finished running.
  return function (message) {
    // 👉 1) Replace ___ with the variable the outer function remembers.
    return "[" + ___ + "] " + message;
  };
}

const errorLog = makeLogger("ERROR");   // this logger remembers "ERROR"
const infoLog  = makeLogger("INFO");    // a separate backpack, remembering "INFO"

console.log(errorLog("Disk full"));
console.log(infoLog("Backup finished"));

// PART 2 - a private counter
function createCounter() {
  // 👉 2) Replace ___ with the keyword that makes 'hits' private to this
  //       function AND lets it be reassigned. (Not const. Not var.)
  ___ hits = 0;

  return {
    hit() {
      hits = hits + 1;   // reaches into the closure and updates it
      return hits;
    },
    total() {
      return hits;       // the only way to read the private value
    }
  };
}

const counter = createCounter();
counter.hit();
counter.hit();
counter.hit();

console.log("Total hits:", counter.total());
console.log("Direct access:", counter.hits);   // stays hidden

// ✅ Expected output:
// [ERROR] Disk full
// [INFO] Backup finished
// Total hits: 3
// Direct access: undefined

Stuck on blank 2? The last line is the clue: counter.hits must print undefined. If you pick a keyword that puts hits on the returned object, that line would print 3 instead.

SECTION 5 — Closures and Event Handlers

Event handlers, timeouts, and interactive websites heavily rely on closures.

Example:

Even after setupButton finishes, the inner arrow function still knows:

• surrounding variables
• the DOM element

That's why closures are essential for UI programming.

SECTION 6 — Closures + Async Code (Critical for Modern JS)

Closures keep variables alive during async operations.

Even though loadUser has returned long before the API finishes, the .then() callback remembers prefix.

This is EXACTLY how:

• Node.js callbacks

all retain access to old variables.

SECTION 7 — Memoization with Closures (Speed Boost Technique)

Memoization = caching results so future calls are instant.

Closures make memoization easy.

SECTION 8 — SUMMARY & CHEAT SHEET

const global = 1;

function() { var x = 1; }

if (true) { let x = 1; } // x not accessible outside

function outer() { const x = 1; function inner() { console.log(x); } }

📋 Quick Reference — Closures

🏆 Mini-Challenge: Write once()

No blanks this time — just a brief and an outline. Write a function called once(fn). It takes a function and hands you back a new function that runs fn only the first time it is called. Every later call returns the value from that first run without calling fn again.

This is a real utility — libraries use it for one-time setup, and it is impossible to write without a closure, because the "have I run yet?" flag has to survive between calls while staying hidden from everyone else.

// 🎯 MINI-CHALLENGE: write once(fn)
//
// Outline - no logic filled in, that part is yours:
//
// function once(fn) {
//   1. create a private flag 'called', starting as false
//   2. create a private 'result' to hold the first return value
//   3. return a function that accepts ...args
//   4.    if called is still false: set called = true and store fn(...args) in result
//   5.    return result   (the same value every single time)
// }
//
// Until you have written once(), running this throws
// "ReferenceError: once is not defined" - that is expected, not a bug.

// your code here


// --- test harness: do not change anything below this line ---
let runs = 0;
const setup = once(function (name) {
  runs = runs + 1;                     // counts how many times the REAL work happened
  return "Configured " + name;
});

console.log(setup("app"));
console.log(setup("app"));
console.log(setup("something else"));  // ignored - the first result is reused
console.log("times the real function ran:", runs);

// ✅ Expected output:
// Configured app
// Configured app
// Configured app
// times the real function ran: 1

Note the third line of expected output: setup("something else") still prints Configured app. That is the point — the argument is ignored because fn never runs a second time.

Lesson Complete — Closures & Scope!

You've mastered one of the hardest concepts in JavaScript. Understanding closures puts you in the top tier of JavaScript developers.

Practice quiz

Continue this course

• Previous: Error Handling
• Next: Prototypes and Classes — Model real-world objects with JS classes and prototype inheritance
• Quick reference: JavaScript cheat sheet
• From the blog: Understanding JavaScript Closures