1. What is a Closure?

A closure is created when an inner function retains access to variables from its outer lexical scope, even AFTER the outer function has finished executing and returned!

2. Why It Matters

Closures power data privacy, private variables, event handlers, factory functions, and stateful hooks in modern JavaScript frameworks like React.

3. The Closure Pattern

When an outer function returns an inner function, the inner function carries a reference to its outer lexical scope in a persistent memory closure:

function createCounter() {
  let count = 0; // Private state variable

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

const counter = createCounter();

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

Notice how count remains accessible and remembers its updated state across calls, even though createCounter() finished executing long ago!

4. Visual Closure Memory

[ Execution Context ] -> createCounter() finished & popped off Call Stack
                             |
                             v
[ Closure Scope ] -------> count = 3 (Persisted in heap memory!)
                             ^
                             |
[ Returned Function ] -> counter() reads & updates 'count'

5. Practical Real-World Example: Private State

function createBankAccount(initialBalance) {
  let balance = initialBalance; // Fully private variable!

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

const account = createBankAccount(100);
console.log(account.deposit(50)); // 150
console.log(account.balance);     // undefined (Cannot access private state directly!)

6. Common Mistakes

• Memory Leaks: Because closures retain references to outer variables, holding large unused objects in closure scopes prevents garbage collection.
• Loop Index Closure Bug: Creating callbacks inside a var loop captures the final loop value. Use let in loops so each iteration creates a fresh closure environment!

7. Try It Yourself

Write it yourself. The tests below run against your code.

function getIncrementedValue(start) {
  return 0;
}

8. Next Steps

Closures give functions durable state memory. Next, let's transition to Phase 3 and master Arrays and Objects!