JavaScript Closures Explained — Scope, Memory and Real-World Patterns

// The outer function defines a variable in its local scope
function createGreeter(language) {
  // 'greeting' lives in createGreeter's scope
  const greeting = language === 'es' ? 'Hola' : 'Hello';

  // This inner function is defined INSIDE createGreeter.
  // It can see 'greeting' because of lexical scope.
  function greet(name) {
    // At runtime, JS walks up the scope chain and finds 'greeting'
    console.log(`${greeting}, ${name}!`);
  }

  return greet; // We return the inner function itself, not its result
}

const greetInEnglish = createGreeter('en');
const greetInSpanish = createGreeter('es');

// createGreeter has finished running — its stack frame is gone.
// Yet greetInEnglish still remembers 'greeting' === 'Hello'.
greetInEnglish('Alice'); // Hello, Alice!
greetInSpanish('Carlos'); // Hola, Carlos!

// A factory function that builds independent counters
function createCounter(startValue = 0) {
  // 'count' is private — nothing outside this function can touch it directly
  let count = startValue;

  // We return an object whose methods ALL close over the same 'count' variable
  return {
    increment() {
      count += 1;
      console.log(`Count is now: ${count}`);
    },
    decrement() {
      count -= 1;
      console.log(`Count is now: ${count}`);
    },
    getCount() {
      // This is the only public read access we expose
      return count;
    }
  };
}

const pageViewCounter = createCounter(0);
const cartItemCounter = createCounter(10); // starts at 10

pageViewCounter.increment(); // Count is now: 1
pageViewCounter.increment(); // Count is now: 2
cartItemCounter.decrement(); // Count is now: 9

// The two counters are completely independent — separate closure records
console.log('Page views:', pageViewCounter.getCount()); // 2
console.log('Cart items:', cartItemCounter.getCount()); // 9

// 'count' is genuinely private — this would be undefined:
// console.log(pageViewCounter.count); // undefined

// ─── THE BUG ───────────────────────────────────────────────────────
// Using 'var': every handler closes over the SAME 'i' variable
const buggyButtons = [];
for (var i = 0; i < 3; i++) {
  buggyButtons[i] = function () {
    // By the time this runs, the loop finished and i === 3
    console.log('Buggy — button index:', i);
  };
}
buggyButtons[0](); // Buggy — button index: 3  (not 0!)
buggyButtons[1](); // Buggy — button index: 3
buggyButtons[2](); // Buggy — button index: 3

// ─── FIX 1: Use 'let' (recommended for modern JS) ──────────────────
// 'let' creates a NEW binding per loop iteration
const fixedWithLet = [];
for (let j = 0; j < 3; j++) {
  fixedWithLet[j] = function () {
    // Each closure captures its OWN 'j' — a separate binding each time
    console.log('Fixed with let — button index:', j);
  };
}
fixedWithLet[0](); // Fixed with let — button index: 0
fixedWithLet[1](); // Fixed with let — button index: 1
fixedWithLet[2](); // Fixed with let — button index: 2

// ─── FIX 2: IIFE to capture by value (useful in legacy code) ───────
const fixedWithIIFE = [];
for (var k = 0; k < 3; k++) {
  // The IIFE runs immediately, passing 'k' as 'capturedK'
  // Each invocation creates a new scope with its own 'capturedK'
  fixedWithIIFE[k] = (function (capturedK) {
    return function () {
      console.log('Fixed with IIFE — button index:', capturedK);
    };
  })(k);
}
fixedWithIIFE[0](); // Fixed with IIFE — button index: 0
fixedWithIIFE[1](); // Fixed with IIFE — button index: 1
fixedWithIIFE[2](); // Fixed with IIFE — button index: 2

// ─── PATTERN 1: MEMOIZATION ────────────────────────────────────────
// A generic memoize wrapper — works with any single-argument function
function memoize(expensiveFunction) {
  // 'cache' is private — only the returned wrapper can read or write it
  const cache = new Map();

  return function memoized(input) {
    if (cache.has(input)) {
      console.log(`Cache hit for: ${input}`);
      return cache.get(input); // Return stored result immediately
    }

    console.log(`Computing result for: ${input}`);
    const result = expensiveFunction(input);
    cache.set(input, result); // Store it for next time
    return result;
  };
}

// Simulate a slow calculation (e.g., fetching from DB, heavy computation)
function computeSquare(n) {
  return n * n;
}

const fastSquare = memoize(computeSquare);

console.log(fastSquare(9));  // Computing result for: 9 → 81
console.log(fastSquare(9));  // Cache hit for: 9 → 81 (no recompute)
console.log(fastSquare(12)); // Computing result for: 12 → 144

// ─── PATTERN 2: MODULE PATTERN ─────────────────────────────────────
// A small user session manager — private state, public interface
const sessionManager = (function () {
  // These are completely private — not accessible outside
  let currentUser = null;
  let loginTimestamp = null;

  return {
    login(username) {
      currentUser = username;
      loginTimestamp = Date.now();
      console.log(`${username} logged in.`);
    },
    logout() {
      console.log(`${currentUser} logged out after ${
        Math.round((Date.now() - loginTimestamp) / 1000)
      }s.`);
      currentUser = null;
      loginTimestamp = null;
    },
    getCurrentUser() {
      return currentUser; // Controlled read access
    }
  };
})(); // IIFE: runs immediately, returns the public API object

sessionManager.login('alice');
console.log('Active user:', sessionManager.getCurrentUser());
sessionManager.logout();
console.log('Active user:', sessionManager.getCurrentUser()); // null