JavaScript Closures, Scope, and the Module Pattern: The Complete Guide

// JavaScript uses lexical (static) scope — determined at write time, not run time
const x = 'global';
function outer() {
  const x = 'outer';
  function inner() {
    const x = 'inner';
    console.log(x); // 'inner' — finds x in own scope first
  }
  inner();
  console.log(x); // 'outer' — inner scope not accessible
}

// Scope chain: inner → outer → global → undefined
// Each function creates a new scope

function makeAdder(x) {
  return function(y) { return x + y; }; // Closes over x
}
const add5 = makeAdder(5);
const add10 = makeAdder(10);
add5(3);  // 8 — x is 5 in add5's closure
add10(3); // 13 — x is 10 in add10's closure

// Captured BY REFERENCE — mutation is visible:
function makeCounter() {
  let count = 0;
  return {
    inc: () => ++count,
    dec: () => --count,
    val: () => count
  };
}
const c = makeCounter();
c.inc(); c.inc(); c.val(); // 2 — same count variable, three closures over it

// BUG: var is function-scoped, all closures share ONE i
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 3, 3, 3 (not 0, 1, 2)
}
// When setTimeout fires, loop is done, i = 3

// FIX 1: let (block-scoped, new binding per iteration)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0, 1, 2
}

// FIX 2: IIFE (captures value at time of call)
for (var i = 0; i < 3; i++) {
  ((j) => setTimeout(() => console.log(j), 100))(i);
}

// IIFE module: creates private scope
const UserStore = (() => {
  let users = [];              // Private: inaccessible from outside
  let nextId = 1;

  return {                     // Public API
    add(name) {
      users.push({ id: nextId++, name });
    },
    getAll() {
      return [...users];       // Return copy, prevent external mutation
    },
    count() { return users.length; }
  };
})();

UserStore.add('Alice');
UserStore.getAll(); // [{ id: 1, name: 'Alice' }]
UserStore.users;    // undefined — private!

// ES Modules (modern approach — same concept, better syntax):
// users.js
let users = [];  // Module-scoped = effectively private
export function addUser(name) { users.push(name); }
export function getUsers() { return [...users]; }