Closures

Model answer

A closure is a function together with the lexical environment in which it was created. The function keeps access to the bindings it references from that environment even when it executes outside the creating scope. It retains bindings, not frozen copies of their values.

1function makeCounter() {2  let count = 0;              // lives in makeCounter's scope3  return () => ++count;       // the returned fn closes over `count`4}5
6const next = makeCounter();7next(); // 18next(); // 2  — `count` survived after makeCounter() returned

Model answer

Every function is created with a reference to its lexical environment, but the closure becomes practically observable when it references outer bindings and survives beyond the immediate execution of that outer scope.

Model answer

A loop declared with var has one function-scoped binding, so every callback closes over that same binding and observes its final value. let creates a fresh per-iteration binding. A factory or IIFE also works by creating a new lexical environment for each callback.

1for (var i = 0; i < 3; i++) {2  setTimeout(() => console.log(i)); // 3, 3, 3 — one shared `i`3}4
5for (let j = 0; j < 3; j++) {6  setTimeout(() => console.log(j)); // 0, 1, 2 — fresh `j` per iteration7}

Model answer

A reachable closure keeps its referenced environment reachable. That is intentional, but retaining a long-lived callback can also retain large objects unnecessarily. Remove obsolete listeners and timers, and avoid capturing more state than the callback needs.

1function attach(node) {2  const big = new Array(1_000_000).fill('x'); // captured by `handler`3  const handler = () => console.log(big.length);4  node.addEventListener('click', handler);5  return () => node.removeEventListener('click', handler); // call on teardown6}

Model answer

A factory can keep mutable bindings private and expose only functions that operate on them. Consumers cannot access the bindings directly, but returned methods share the same environment. ES private fields are often clearer for class-shaped objects, while closures fit functional APIs.

1function createAccount(balance) {2  return {3    deposit: (n) => (balance += n),4    getBalance: () => balance,5  };6}7
8const acct = createAccount(100);9acct.deposit(50);      // 15010acct.getBalance();     // 15011acct.balance;          // undefined — no direct access

Model answer

A callback created during a render sees the props and state from that render. If an effect or delayed callback continues using it after values change, it may observe an old snapshot. Correct dependencies, functional state updates, or a ref for deliberately mutable current data solve different versions of the problem.

Model answer

That wording is misleading. Closures reference lexical bindings. A binding may currently contain a primitive or an object reference, and reassignment changes what later reads observe.

Model answer

The wrapper closes over a cache keyed by arguments, returns a stored result for a hit, and computes on a miss. Production design must bound memory and define key equality.

Model answer

An immediately invoked function or factory keeps implementation bindings private and returns a public object of closures. ES modules now provide clearer file-level encapsulation for many uses.

Model answer

Test the observable API and independence between factory instances. Avoid reaching into private bindings; verify allowed transitions, invalid inputs, and that separate environments never share state.