JavaScript Closures Explained

Closures are fundamental to JavaScript. Here's how they work and how to use them effectively.

What is a Closure?#

// A closure is a function that remembers its lexical scope
// even when executed outside that scope

function outer() {
  const message = 'Hello';

  function inner() {
    console.log(message); // Accesses outer's variable
  }

  return inner;
}

const greet = outer();
greet(); // 'Hello' - still has access to message

// The inner function "closes over" the outer scope
// message is not garbage collected because inner still references it

Creating Closures#

// Function factories
function createCounter() {
  let count = 0;

  return {
    increment() {
      count++;
      return count;
    },
    decrement() {
      count--;
      return count;
    },
    getCount() {
      return count;
    },
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount());  // 1

// Each call creates a new closure
const counter2 = createCounter();
console.log(counter2.getCount()); // 0 - independent

// Closures with parameters
function createMultiplier(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

Private State#

// Module pattern using closures
function createBankAccount(initialBalance) {
  let balance = initialBalance; // Private
  const transactions = [];       // Private

  return {
    deposit(amount) {
      if (amount <= 0) throw new Error('Invalid amount');
      balance += amount;
      transactions.push({ type: 'deposit', amount, date: new Date() });
      return balance;
    },

    withdraw(amount) {
      if (amount <= 0) throw new Error('Invalid amount');
      if (amount > balance) throw new Error('Insufficient funds');
      balance -= amount;
      transactions.push({ type: 'withdraw', amount, date: new Date() });
      return balance;
    },

    getBalance() {
      return balance;
    },

    getTransactions() {
      return [...transactions]; // Return copy
    },
  };
}

const account = createBankAccount(100);
account.deposit(50);    // 150
account.withdraw(30);   // 120
account.balance;        // undefined - private!
account.getBalance();   // 120

Closures in Loops#

// Classic closure gotcha
// Wrong - all callbacks share same i
for (var i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i); // 3, 3, 3
  }, 100);
}

// Solution 1: let (block scoping)
for (let i = 0; i < 3; i++) {
  setTimeout(function () {
    console.log(i); // 0, 1, 2
  }, 100);
}

// Solution 2: IIFE
for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(function () {
      console.log(j); // 0, 1, 2
    }, 100);
  })(i);
}

// Solution 3: forEach with callback
[0, 1, 2].forEach(function (i) {
  setTimeout(function () {
    console.log(i); // 0, 1, 2
  }, 100);
});

Event Handlers#

// Closures in event handlers
function setupButton(buttonId, message) {
  const button = document.getElementById(buttonId);

  button.addEventListener('click', function () {
    alert(message); // Closure captures message
  });
}

setupButton('btn1', 'Hello!');
setupButton('btn2', 'Goodbye!');

// With cleanup
function setupButtonWithCleanup(buttonId, message) {
  const button = document.getElementById(buttonId);

  function handler() {
    alert(message);
  }

  button.addEventListener('click', handler);

  // Return cleanup function
  return function cleanup() {
    button.removeEventListener('click', handler);
  };
}

const cleanup = setupButtonWithCleanup('btn1', 'Hello!');
// Later...
cleanup(); // Removes event listener

Memoization#

// Caching with closures
function memoize(fn) {
  const cache = new Map();

  return function (...args) {
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      return cache.get(key);
    }

    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// Expensive function
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const memoizedFib = memoize(function fib(n) {
  if (n <= 1) return n;
  return memoizedFib(n - 1) + memoizedFib(n - 2);
});

console.log(memoizedFib(40)); // Fast due to caching

// Memoize with max cache size
function memoizeWithLimit(fn, maxSize = 100) {
  const cache = new Map();

  return function (...args) {
    const key = JSON.stringify(args);

    if (cache.has(key)) {
      // Move to end (LRU)
      const value = cache.get(key);
      cache.delete(key);
      cache.set(key, value);
      return value;
    }

    const result = fn.apply(this, args);

    if (cache.size >= maxSize) {
      // Remove oldest entry
      const firstKey = cache.keys().next().value;
      cache.delete(firstKey);
    }

    cache.set(key, result);
    return result;
  };
}

Currying and Partial Application#

// Currying with closures
function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    }
    return function (...moreArgs) {
      return curried.apply(this, [...args, ...moreArgs]);
    };
  };
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
console.log(curriedAdd(1, 2)(3)); // 6
console.log(curriedAdd(1)(2, 3)); // 6

// Partial application
function partial(fn, ...presetArgs) {
  return function (...laterArgs) {
    return fn(...presetArgs, ...laterArgs);
  };
}

function greet(greeting, name) {
  return `${greeting}, ${name}!`;
}

const sayHello = partial(greet, 'Hello');
console.log(sayHello('World')); // "Hello, World!"

Closures in React#

// useState closure
function Counter() {
  const [count, setCount] = useState(0);

  // Each render creates a new closure
  const handleClick = () => {
    setCount(count + 1); // Captures count from this render
  };

  // Problem: stale closure
  useEffect(() => {
    const interval = setInterval(() => {
      console.log(count); // Always logs initial count!
    }, 1000);

    return () => clearInterval(interval);
  }, []); // Empty deps - stale closure

  // Solution: functional update
  useEffect(() => {
    const interval = setInterval(() => {
      setCount((c) => c + 1); // No closure issue
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <button onClick={handleClick}>{count}</button>;
}

// useCallback captures values
function SearchComponent() {
  const [query, setQuery] = useState('');

  // Stale closure if query not in deps
  const search = useCallback(() => {
    fetchResults(query);
  }, [query]); // Must include query

  return <SearchButton onClick={search} />;
}

Memory Considerations#

// Closures keep references alive
function createLargeArray() {
  const largeArray = new Array(1000000).fill('data');

  return function () {
    return largeArray.length; // largeArray stays in memory
  };
}

const getLength = createLargeArray();
// largeArray is not garbage collected

// Solution: Only capture what you need
function createLargeArrayFixed() {
  const largeArray = new Array(1000000).fill('data');
  const length = largeArray.length;

  return function () {
    return length; // Only captures the number
  };
  // largeArray can be garbage collected
}

// Accidental closures
function setupHandler() {
  const data = fetchSomeData(); // Large object

  element.onclick = function () {
    // Captures entire scope, including data
    console.log('clicked');
  };
}

// Better: Don't create unnecessary closures
function setupHandlerFixed() {
  const data = fetchSomeData();
  processData(data);
  // data goes out of scope

  element.onclick = handleClick; // No closure
}

function handleClick() {
  console.log('clicked');
}

Best Practices#

Understanding:
✓ Know what variables are captured
✓ Understand scope chain
✓ Watch for stale closures
✓ Consider memory implications

Patterns:
✓ Use for private state
✓ Use for factory functions
✓ Use for memoization
✓ Use for event handlers

Avoid:
✗ Capturing large objects unnecessarily
✗ Creating closures in loops with var
✗ Forgetting useCallback dependencies
✗ Overcomplicating simple code

Closures enable powerful patterns like private state, factories, and memoization. Understanding how closures capture their lexical scope helps avoid common pitfalls like stale closures and memory leaks. Use them intentionally for cleaner, more functional code.