JavaScript Closures: How Functions Remember Their Surrounding Scope

First, a Quick Recap: The One-Way Mirror

From Lesson 10, you learnedlexical scope— inner code can see outer variables, but not the other way around:

let global = "I'm outside 🌍";
function outer() {
  let inner = "I'm inside 🏠";
  console.log(global);
  // ✅ inner code sees OUT  console.log(inner);    // ✅ sees its own}
  outer();
  console.log(inner);
  // ❌ ReferenceError — outside can't see IN

And the rule that matters most today:

JavaScript decides scope by where code is WRITTEN, not where it runs.(Lexical scope)

Keep both ideas in mind. Closure is what happens when you push them one step further.

The Setup: Functions Returning Functions

In JavaScript, functions are values — like numbers or strings (Lesson 5 mentioned this!). That means a function can bestored in a variable… and evenreturned from another function:

function outer() {
  let message = "Hello from outer! 👋";
  function inner() {
    console.log(message);
    // inner uses outer's variable
  } return inner;
  // ← return the FUNCTION itself (no parentheses!)
}const myFunction = outer();
// myFunction now HOLDS the inner function
myFunction();
// "Hello from outer! 👋"

Read the last two lines slowly. Something remarkable just happened:

1. outer()ran andfinished— normally itsmessagevariable would be destroyed
2. ButmyFunction(which isinner) still printsmessageperfectly!

How?Wheninnerwas born insideouter, it didn't just take thecodewith it — it took alive reference to its birthplace scope. That bundled-up memory is the closure.

🎒 The Definition (Finally Demystified)

A closure is a function bundled together with the variables from the scope where it was created — which it can access even after that outer scope has finished running.

The backpack analogy: 🎒

• When a function isborn(defined), it packs a backpack
• Inside the backpack:every variable it could see at birth(its surrounding scope)
• Wherever the function travels — returned, passed around, stored — the backpack comes along
• Even when the birthplace (outer function) isgone, the backpack remains

function outer() {
  let secret = "packed at birth 🎒";
  return function() {
    console.log(secret);
    // opens the backpack — still there!
  };
}

The Classic Example: The Counter 🔢

Let's decode our opening mystery line by line:

function createCounter() {
  let count = 0;
  // 📦 lives in createCounter's scope
  return function() {
    count++;
    // 🎒 closure: remembers count
    console.log(count);
  };
}const counter1 = createCounter();
counter1();
// 1
counter1();
// 2
counter1();
// 3

What's really happening:

1. createCounter()runs → createscount = 0→ creates the inner function →inner packscountinto its backpack→ returns inner
2. createCounterfinishes. Normallycountwould be garbage-collected…
3. …but JavaScript sees the returned function stillreferencescount— socountstays alive, attached to the closure
4. Everycounter1()call opens the same backpack and increments thesamecount

🤯 The Mind-Bending Part: Separate Backpacks

Each call tocreateCounter()creates abrand new, independent closure:

const counterA = createCounter();
const counterB = createCounter();
counterA();
// 1  (A's backpack: count 0 → 1)
counterA();
// 2  (A's: 1 → 2)
counterB();
// 1  (B's OWN backpack: 0 → 1 — unaffected by A!)
counterA();
// 3  (A continues: 2 → 3)

Two counters, two separatecountvariables, zero interference. Each closure has itsown private memory. This is why closures are the foundation of so much real-world JavaScript.

Why Closures Matter: Real-World Uses 🛠️

1️⃣ Private Variables (The #1 Professional Use)

JavaScript has no true "private" keyword for regular objects — but closures creategenuinely private data:

function createBankAccount() {
  let balance = 1000;
  // 🔒 PRIVATE — untouchable from outside!
  return {
    deposit(amount) {
      balance += amount;
      console.log(`Deposited ₹${amount}. Balance: ₹${balance}`);
    }, withdraw(amount) {
      if (amount > balance) {
        console.log("❌ Insufficient funds!");
        return;
      } balance -= amount;
      console.log(`Withdrew ₹${amount}. Balance: ₹${balance}`);
    }, checkBalance() {
      console.log(`Current balance: ₹${balance}`);
    }
  };
}const account = createBankAccount();
account.deposit(500);
// Deposited ₹500. Balance: ₹1500account.withdraw(200);      // Withdrew ₹200. Balance: ₹1300account.checkBalance();     // Current balance: ₹1300
console.log(account.balance);
// undefined — PRIVATE! 🔒account.balance = 999999;     // 😈 creates a NEW useless property…account.checkBalance();       // …real balance still ₹1300 ✅

There isno wayto touchbalanceexcept through the three methods. That's true encapsulation — powered entirely by closure. This pattern (the "module pattern") ran the JavaScript world for decades.

2️⃣ Function Factories 🏭

Closures let you manufacture customized functions:

function createMultiplier(multiplier) {
  return function(number) {
    return number * multiplier;
    // 🎒 remembers its own multiplier  };}
    const double = createMultiplier(2);
    const triple = createMultiplier(3);
    const tenTimes = createMultiplier(10);
    console.log(double(5));
    // 10console.log(triple(5));    // 15console.log(tenTimes(5));  // 50

One factory, infinite specialized tools — each closure remembers its ownmultiplier.

3️⃣ Event Handlers (The One You Already Use!)

function setupButton(buttonId) {
  let clickCount = 0;
  document.getElementById(buttonId).addEventListener("click", function() {
    clickCount++;
    // 🎒 closure in action!
    console.log(`Button clicked ${clickCount} times`);
  });
}setupButton("myBtn");
// Every click remembers and increments ITS button's count —
// long after setupButton finished running ✅

That anonymous click function is a closure — rememberingclickCountbetween clicks. If you've written any event handling,you've already used closures without knowing it.Surprise! 🎉

4️⃣ setTimeout — The Delayed Memory

function scheduleReminder(task, seconds) {
  setTimeout(function() {
    console.log(`⏰ Reminder: ${task}`);
    // remembers 'task'
  }, seconds * 1000);
}scheduleReminder("Drink water 💧", 3);
scheduleReminder("Stretch break 🤸", 5);
// 3s later: ⏰ Reminder: Drink water 💧
// 5s later: ⏰ Reminder: Stretch break 🤸

scheduleReminderfinishes instantly — but each timer's function carries its owntaskinto the future. Closure as a time machine.

⚠️ The Famous Trap: Closures in Loops

The most-asked closure interview question. What prints here?

for (var i = 1;
i <= 3;
i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

Expected:1, 2, 3Actual:4, 4, 4 😱

Why?varis function-scoped (Lesson 10!) — all three timer functions shareoneiin their backpacks. By the time they run (100ms later), the loop has finished andiis already4. Three backpacks, but all pointing at thesamevariable.

Fix 1: Use let (The Modern Solution ✅)

for (let i = 1;
i <= 3;
i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}// 1, 2, 3 ✅

letisblock-scoped— each loop iteration gets itsownfreshi, so each closure packs its own copy. This fix alone is a top reasonletwas invented.

Fix 2: The Classic Closure Wrapper (Pre-2015 Style)

for (var i = 1;
i <= 3;
i++) {
(function(captured) {
    // new function = new scope per iteration
    setTimeout(function() {
      console.log(captured);
      // 🎒 each timer packs its own copy
    }, 100);
  })(i);
  // immediately invoked with current i
}// 1, 2, 3 ✅

You won't write this today, but you'llreadit in older codebases — and interviewers adore asking about it.

Closure vs Scope: Clearing the Confusion 🧹

Every function in JavaScript technically carries closure behavior — but wetalk aboutclosures when a functionoutlivesits birthplace and still uses those remembered variables.

🎤 The interview one-liner:"A closure is created when an inner function accesses variables from its outer function's scope, and those variables stay alive even after the outer function has finished executing."— memorize this, and you're ahead of 80% of candidates.

Common Beginner Mistakes (And Fixes)

💡 The live-reference detail:

script.js

Copy Code Run Online

function outer() {
  let value = "original";
  const fn = function() {
    console.log(value);
  };
  value = "changed!";
  // changed AFTER fn was created
  return fn;
}outer()();
// "changed!" — closure sees the LIVE variable, not a snapshot

Quick Self-Check: Lesson 22 Quiz 🧠

1. In one sentence: what is a closure?
2. What's the output?
   script.js

   Copy Code Run Online

   function make() {
     let x = 10;
     return function() {
       x += 5;
       console.log(x);
     };
   }const a = make();
   const b = make();
   a();
   a();
   b();

3. Why doesaccount.balance = 999fail to hack the bank account example?
4. What prints fromfor (var i = 1; i <= 3; i++) { setTimeout(() => console.log(i), 100); }and why?
5. Do closures store acopyof outer variables or alive reference?

(Answers: 1. A function bundled with the variables of the scope where it was created, which it can access even after that scope finishes · 2. 15, 20, then 15 — a's closure runs twice (10→15→20), b has its own private x (10→15) · 3. The real balance lives in the closure — assigning account.balance creates a new, unrelated property · 4. 4, 4, 4 — var is function-scoped, so all three closures share one i that ends at 4; fix with let · 5. A live reference — closures see the current value, not a snapshot from creation time)