📘 JavaScript Closures

✅ 1. What is a Closure?

A closure is created when a function:

• Accesses variables from an outer scope, even after that scope has finished executing.

💡 In simple terms:
A function remembers the variables around it, even if it’s run later.

📌 2. Basic Closure Example

jsCopyEditfunction outer() {
  const name = "Alice";

  function inner() {
    console.log("Hello, " + name); // ✅ Has access to `name`
  }

  return inner;
}

const greet = outer(); // outer() runs and returns `inner`
greet(); // Hello, Alice

Even though outer() has finished, inner() still has access to name. That’s a closure.

📌 3. Closures Keep Private Data

jsCopyEditfunction createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

✅ count is private — only the returned function can access it.

📌 4. Closures in Loops (Classic Mistake)

Without closure:

jsCopyEditfor (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3 (not 0, 1, 2)

✅ With closure using let (block scope):

jsCopyEditfor (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2

📌 5. Real-World Use: Encapsulation

jsCopyEditfunction bankAccount(initialBalance) {
  let balance = initialBalance;

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

const myAccount = bankAccount(100);
myAccount.deposit(50);
console.log(myAccount.getBalance()); // 150

✅ balance is not accessible from outside — only through methods.

📌 6. Closures in Event Listeners

jsCopyEditfunction setupButton(label) {
  let count = 0;

  return function clickHandler() {
    count++;
    console.log(`${label} clicked ${count} times`);
  };
}

const saveHandler = setupButton("Save");

document.getElementById("saveBtn").addEventListener("click", saveHandler);

🧠 Summary Table

🧪 Practice Challenges

1. Write a secretHolder(secret) function that returns getSecret() and setSecret(newSecret).
2. Create a makeMultiplier(factor) that returns a function to multiply any number by that factor.

📌 Bonus: Visualizing Closure

jsCopyEditfunction outer() {
  let message = "I'm inside outer";

  return function inner() {
    console.log(message);
  };
}

const fn = outer(); // outer() returns inner
fn(); // logs: I'm inside outer

Even though outer() is done, inner() remembers message.

Would you like this as:

• 📄 A printable PDF?
• 💻 A live JSFiddle with interactive closure examples?
• 🧠 A mini quiz to test your understanding?