JavaScript Closures Explained: Why Your Functions Remember Everything

function makeCounter() {
  let count = 0; // this variable lives in makeCounter's scope

  return function increment() {
    count++; // increment closes over 'count'
    return count;
  };
}

const counter = makeCounter(); // makeCounter has returned
counter(); // 1 - count is still alive because increment holds a reference
counter(); // 2
counter(); // 3

// count is NOT accessible from outside
console.log(typeof count); // "undefined"

const outerVariable = 'I am outer';

function outer() {
  const middleVariable = 'I am middle';

  function middle() {
    const innerVariable = 'I am inner';

    function inner() {
      // Can see all enclosing scopes (lexical chain)
      console.log(outerVariable);   // ✓
      console.log(middleVariable);  // ✓
      console.log(innerVariable);   // ✓
    }

    inner();
    // Can NOT see innerVariable here - scope only flows outward
  }

  middle();
  // Can NOT see innerVariable or middleVariable from inner
}

outer();

// BUG: var is function-scoped - all callbacks share the same 'i'
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Output: 3, 3, 3

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

// FIX 2 (pre-ES6): IIFE to capture each value
for (var i = 0; i < 3; i++) {
  (function(captured) {
    setTimeout(() => console.log(captured), 100);
  })(i);
}
// Output: 0, 1, 2

// FIX 3: use forEach (each callback has its own parameter)
[0, 1, 2].forEach(i => {
  setTimeout(() => console.log(i), 100);
});
// Output: 0, 1, 2

// STALE CLOSURE BUG
function SearchBox() {
  const [query, setQuery] = useState('');

  useEffect(() => {
    // This closure captures 'query' from the first render (empty string)
    const id = setInterval(() => {
      console.log('Searching for:', query); // Always '' - stale!
      fetchResults(query);
    }, 2000);
    return () => clearInterval(id);
  }, []); // Empty deps = closure never refreshes

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

// FIX 1: Add query to dependency array
useEffect(() => {
  const id = setInterval(() => {
    fetchResults(query); // Always fresh
  }, 2000);
  return () => clearInterval(id);
}, [query]); // Re-creates closure when query changes

// FIX 2: Use a ref to always get the latest value
const queryRef = useRef(query);
useEffect(() => { queryRef.current = query; }, [query]);

useEffect(() => {
  const id = setInterval(() => {
    fetchResults(queryRef.current); // Ref is always current
  }, 2000);
  return () => clearInterval(id);
}, []); // Safe to omit from deps - ref is mutable

function memoize(fn) {
  const cache = new Map(); // lives in closure

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key); // return cached result
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// Expensive Fibonacci - without memoization: O(2^n)
const fib = memoize(function(n) {
  if (n <= 1) return n;
  return fib(n - 1) + fib(n - 2); // recursive calls also hit cache
});

console.time('fib(40)');
console.log(fib(40)); // 102334155
console.timeEnd('fib(40)'); // <1ms instead of seconds

// React equivalent
const expensiveValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

// MEMORY LEAK: listener closes over 'largeData', never removed
function setup() {
  const largeData = new Array(1_000_000).fill('data');

  document.addEventListener('click', function handler() {
    // Uses largeData - keeps it alive forever
    process(largeData);
  });
  // 'handler' is never removed - largeData can never be GC'd
}

// FIX: Remove listener when done
function setup() {
  const largeData = new Array(1_000_000).fill('data');

  function handler() {
    process(largeData);
  }

  document.addEventListener('click', handler);

  return function cleanup() {
    document.removeEventListener('click', handler); // largeData now GC-eligible
  };
}

// React: useEffect cleanup
useEffect(() => {
  const handler = (e) => handleEvent(e);
  window.addEventListener('resize', handler);

  return () => {
    window.removeEventListener('resize', handler); // cleanup on unmount
  };
}, []);