JavaScript Closures Interview Questions — Deep Internals, Gotchas & Real Answers

// Demonstrate that closures capture variables BY REFERENCE, not by value

function createCounterPair() {
  let count = 0; // This variable lives in the closure record

  function increment() {
    count += 1;           // Both functions share the SAME `count` variable
    return count;
  }

  function decrement() {
    count -= 1;           // Mutating the same live reference
    return count;
  }

  // We return both functions — they both close over the same `count`
  return { increment, decrement };
}

const counter = createCounterPair();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1  — decrement sees the same count that increment left at 2

// Now create a SECOND independent counter
const anotherCounter = createCounterPair();
console.log(anotherCounter.increment()); // 1  — fresh closure record, fresh count
console.log(counter.increment());        // 2  — original counter unaffected

// Key takeaway: each call to createCounterPair creates a NEW closure record.
// The two counters are isolated — they don't share state.

// ─── THE BUG ────────────────────────────────────────────────────────────────
// Using `var` — all callbacks share the same `i` reference

const buggyTimers = [];
for (var i = 0; i < 3; i++) {
  buggyTimers.push(function printIndex() {
    console.log('buggy:', i); // `i` is looked up NOW, after the loop, not at creation time
  });
}
buggyTimers.forEach(fn => fn());
// Output: buggy: 3, buggy: 3, buggy: 3  ← everyone sees the final value


// ─── FIX 1: Use `let` (block-scoped — creates a NEW binding per iteration) ──
const letTimers = [];
for (let j = 0; j < 3; j++) {
  letTimers.push(function printIndex() {
    console.log('let fix:', j); // Each iteration has its OWN `j` in its own block scope
  });
}
letTimers.forEach(fn => fn());
// Output: let fix: 0, let fix: 1, let fix: 2  ✓


// ─── FIX 2: IIFE — manually create a new scope and snapshot the value ───────
const iifeTimers = [];
for (var k = 0; k < 3; k++) {
  iifeTimers.push(
    (function captureIndex(snapshotK) {    // IIFE is called immediately with current k
      return function printIndex() {
        console.log('iife fix:', snapshotK); // Closes over snapshotK, not the outer k
      };
    })(k)                                  // k is passed as argument — creates a new binding
  );
}
iifeTimers.forEach(fn => fn());
// Output: iife fix: 0, iife fix: 1, iife fix: 2  ✓


// ─── FIX 3: .forEach with its own callback scope ────────────────────────────
const indices = [0, 1, 2];
const forEachTimers = [];
indices.forEach(function(index) {         // `index` is a fresh parameter binding per call
  forEachTimers.push(function printIndex() {
    console.log('forEach fix:', index);
  });
});
forEachTimers.forEach(fn => fn());
// Output: forEach fix: 0, forEach fix: 1, forEach fix: 2  ✓

// ─── PATTERN 1: MODULE PATTERN — private state via closure ──────────────────

function createUserSession(initialUsername) {
  // `sessionData` is private — nothing outside this function can touch it directly
  const sessionData = {
    username: initialUsername,
    loginTime: Date.now(),
    requestCount: 0,
  };

  return {
    trackRequest() {
      sessionData.requestCount += 1; // Mutates private state through the closure
    },
    getStats() {
      // Returns a COPY so callers can't mutate the internals directly
      return { ...sessionData };
    },
    logout() {
      // Nulling the reference here doesn't free memory immediately — the returned
      // object still holds the closure. You'd need to discard the returned object too.
      console.log(`${sessionData.username} logged out after ${sessionData.requestCount} requests.`);
    },
  };
}

const session = createUserSession('alice');
session.trackRequest();
session.trackRequest();
console.log(session.getStats());
session.logout();


// ─── PATTERN 2: MEMOIZATION — persistent cache via closure ───────────────────

function memoize(expensiveFunction) {
  const cache = new Map(); // Cache lives in the closure — persists across calls

  return function memoizedWrapper(...args) {
    const cacheKey = JSON.stringify(args); // Serialize args as the lookup key

    if (cache.has(cacheKey)) {
      console.log(`[cache hit] key: ${cacheKey}`);
      return cache.get(cacheKey);
    }

    const result = expensiveFunction(...args); // Only computed on a cache miss
    cache.set(cacheKey, result);
    console.log(`[cache miss] computed and stored for key: ${cacheKey}`);
    return result;
  };
}

function slowSquare(n) {
  // Simulate an expensive computation
  return n * n;
}

const fastSquare = memoize(slowSquare);

console.log(fastSquare(7));  // cache miss — computes 49
console.log(fastSquare(7));  // cache hit  — returns 49 instantly
console.log(fastSquare(8));  // cache miss — computes 64


// ─── MEMORY LEAK EXAMPLE — closure holding a large object via event listener ─

function attachLeakyListener() {
  const hugeDataSet = new Array(100_000).fill('sensitive data'); // 100k entries

  document.addEventListener('click', function handleClick() {
    // This handler closes over `hugeDataSet` — even if we never USE it here,
    // the closure keeps the entire array alive as long as this listener exists.
    console.log('clicked');
  });

  // FIX: store the handler reference so you can remove it later
  // document.removeEventListener('click', handleClick);
  // Then set hugeDataSet = null if you no longer need it.
}

// In a real SPA, calling attachLeakyListener() on every route change
// without cleanup would steadily grow memory until the tab crashes.

// NOTE: This is illustrative React-style pseudocode — runnable in a React project
// Demonstrating the stale closure bug and its fixes without JSX for clarity

// ─── THE STALE CLOSURE BUG ───────────────────────────────────────────────────
import { useState, useEffect, useRef, useCallback } from 'react';

function StaleCounterBuggy() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // BUG: This closure captured `count` at mount time (value: 0).
      // It never re-runs, so it always reads count as 0 and sets it to 1.
      // The counter appears stuck at 1.
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Empty deps — effect only runs once — closure freezes `count` at 0

  return count;
}


// ─── FIX 1: Functional updater — no closure dependency on `count` at all ─────
function StaleCounterFixed() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // The functional form receives the LATEST state as an argument from React.
      // This callback doesn't need to close over `count` at all.
      setCount(latestCount => latestCount + 1); // Always increments from the real current value
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Empty deps is now safe because we don't read `count` from the closure

  return count;
}


// ─── FIX 2: useRef to hold a mutable, always-fresh reference ─────────────────
function useLatestCallback(callback) {
  const callbackRef = useRef(callback);

  // Keep the ref current on every render — ref mutations don't trigger re-renders
  useEffect(() => {
    callbackRef.current = callback;
  });

  // Return a stable function that always calls the latest callback via the ref
  return useCallback((...args) => {
    return callbackRef.current(...args);
  }, []); // This returned function is stable across renders
}

// Usage:
function StaleCounterWithRef() {
  const [count, setCount] = useState(0);

  const handleTick = useLatestCallback(() => {
    console.log('current count is:', count); // Always sees the latest count via the ref pattern
    setCount(count + 1);
  });

  useEffect(() => {
    const intervalId = setInterval(handleTick, 1000);
    return () => clearInterval(intervalId);
  }, [handleTick]); // handleTick is stable, so this still only mounts once

  return count;
}