JavaScript Closures

What is a Closure?

A closure is when a function "remembers" variables from where it was created, even after that place is gone.

Think of it like this: You leave a note for yourself with instructions. Even after you leave the room, the note still has access to information from when you wrote it.

``` ┌─────────────────────┐ │ Outer Function │ │ creates variable │ │ count = 0 │ │ ┌───────────────┐ │ │ │ Inner Func │ │ ← Takes a "snapshot" │ │ created here │ │ of 'count' │ │ │ │ │ └───────────────┘ │ └─────────────────────┘ │ │ Outer function ends │ But inner function │ still remembers! │ ┌────────▼────────────┐ │ Inner function │ │ still has access │ │ to 'count' │ └────────────────────┘ ```

Step-by-Step: Understanding Closures

**Step 1: Create outer function** ```javascript function outer() { let count = 0; } ```

**Step 2: Create inner function inside** ```javascript function outer() { let count = 0; function inner() { count++; console.log(count); } } ```

**Step 3: Return the inner function** ```javascript function outer() { let count = 0; function inner() { count++; console.log(count); } return inner; // Return the function } ```

**Step 4: Use it** ```javascript const counter = outer(); // outer() finishes, but... counter(); // 1 - inner() still remembers count! counter(); // 2 - count keeps increasing! counter(); // 3 ```

**The magic:** Even though `outer()` finished running, `inner()` still remembers and can access `count`.

Visual Explanation

``` When outer() runs: ┌─────────────────────┐ │ count = 0 │ │ inner() created │ ← inner() "sees" count └─────────────────────┘

When outer() finishes: ┌─────────────────────┐ │ outer() is gone │ │ BUT... │ └─────────────────────┘

inner() still has: ┌─────────────────────┐ │ "Memory" of count │ ← Closure! │ Can still use it │ └─────────────────────┘ ```

Why Closures Matter: Data Privacy

Closures let you create "private" variables that can't be accessed from outside:

```javascript function createBankAccount(initialBalance) { let balance = initialBalance; // Private! Can't access from outside return { deposit: (amount) => { balance = balance + amount; return balance; }, withdraw: (amount) => { if (amount <= balance) { balance = balance - amount; return balance; } else { return 'Insufficient funds'; } }, getBalance: () => balance }; }

const account = createBankAccount(100); account.deposit(50); // 150 account.withdraw(30); // 120 account.getBalance(); // 120 // account.balance; // undefined! Can't access directly ```

**How it works:** ``` ┌─────────────────────┐ │ balance = 100 │ ← Private variable │ (only accessible │ │ inside closure) │ │ │ │ deposit() │ ← Can access balance │ withdraw() │ ← Can access balance │ getBalance() │ ← Can access balance └─────────────────────┘ │ │ From outside: │ balance is hidden! ```

Function Factories

Closures let you create functions that are "configured" with specific values:

```javascript function createMultiplier(multiplyBy) { return function(number) { return number * multiplyBy; }; }

const double = createMultiplier(2); const triple = createMultiplier(3); const quadruple = createMultiplier(4);

double(5); // 10 (5 * 2) triple(5); // 15 (5 * 3) quadruple(5); // 20 (5 * 4) ```

**What happens:** ``` createMultiplier(2) creates: ┌─────────────────────┐ │ Function that │ │ remembers: │ │ multiplyBy = 2 │ ← Closure! └─────────────────────┘

createMultiplier(3) creates: ┌─────────────────────┐ │ Function that │ │ remembers: │ │ multiplyBy = 3 │ ← Different closure! └─────────────────────┘ ```

Each function remembers its own `multiplyBy` value.

Real Example: Event Handlers

Closures are used everywhere, especially with event handlers:

```javascript function setupButton(buttonId, clickCount) { const button = document.getElementById(buttonId); let count = 0; // Private to this setup button.addEventListener('click', function() { count++; console.log(`Button clicked ${count} times`); if (count >= clickCount) { button.disabled = true; console.log('Button disabled!'); } }); }

setupButton('myButton', 5); ```

**What happens:** - Each button gets its own `count` variable - The click handler "remembers" `count` and `clickCount` - Even though `setupButton` finished, the handler still works

Common Closure Pattern: Module Pattern

```javascript const calculator = (function() { let result = 0; // Private return { add: (num) => { result += num; return result; }, subtract: (num) => { result -= num; return result; }, multiply: (num) => { result *= num; return result; }, getResult: () => result, reset: () => { result = 0; } }; })();

calculator.add(10); // 10 calculator.multiply(3); // 30 calculator.getResult(); // 30 ```

This creates a "module" with private variables that can only be accessed through the returned methods.

Quick Tips

1. **Closures happen automatically** - Any function that uses an outer variable creates a closure 2. **They're used everywhere** - Event handlers, callbacks, modules all use closures 3. **Be careful with loops** - Variables in loops can cause unexpected behavior (use let instead of var) 4. **Memory consideration** - Closures keep variables in memory, so don't create unnecessary ones

Closures are one of JavaScript's most powerful features. They enable data privacy, function factories, and many common patterns. Once you understand them, you'll see them everywhere in JavaScript code.