JavaScript Closure Patterns

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

What Are Closures?#

// A closure is a function that retains access to its outer scope
function createCounter() {
  let count = 0; // Private variable

  return function() {
    count++; // Access to outer variable
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

// Each call creates a new closure
const counter2 = createCounter();
console.log(counter2()); // 1 (separate count)

// The inner function "closes over" the outer variables
function outer(x) {
  return function inner(y) {
    return x + y; // x is from outer scope
  };
}

const addFive = outer(5);
console.log(addFive(3)); // 8
console.log(addFive(10)); // 15

Data Privacy#

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

  function recordTransaction(type, amount) {
    transactions.push({
      type,
      amount,
      date: new Date(),
      balance,
    });
  }

  return {
    deposit(amount) {
      if (amount <= 0) throw new Error('Invalid amount');
      balance += amount;
      recordTransaction('deposit', amount);
      return balance;
    },

    withdraw(amount) {
      if (amount > balance) throw new Error('Insufficient funds');
      balance -= amount;
      recordTransaction('withdrawal', amount);
      return balance;
    },

    getBalance() {
      return balance;
    },

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

const account = createBankAccount(100);
account.deposit(50);
account.withdraw(30);
console.log(account.getBalance()); // 120
// account.balance = 1000000; // Won't affect actual balance

Factory Functions#

// Create objects with private state
function createPerson(name, age) {
  // Private data
  let _name = name;
  let _age = age;

  return {
    getName() {
      return _name;
    },
    getAge() {
      return _age;
    },
    setName(newName) {
      if (typeof newName !== 'string') {
        throw new Error('Name must be string');
      }
      _name = newName;
    },
    haveBirthday() {
      _age++;
      return _age;
    },
  };
}

// Factory with configuration
function createValidator(rules) {
  return function validate(data) {
    const errors = [];

    for (const [field, rule] of Object.entries(rules)) {
      if (rule.required && !data[field]) {
        errors.push(`${field} is required`);
      }
      if (rule.minLength && data[field]?.length < rule.minLength) {
        errors.push(`${field} must be at least ${rule.minLength} chars`);
      }
      if (rule.pattern && !rule.pattern.test(data[field])) {
        errors.push(`${field} is invalid`);
      }
    }

    return { valid: errors.length === 0, errors };
  };
}

const validateUser = createValidator({
  email: { required: true, pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },
  password: { required: true, minLength: 8 },
});

console.log(validateUser({ email: 'test@example.com', password: '12345678' }));

Memoization#

// Cache function results using closure
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;
  };
}

// Usage
const expensiveCalculation = memoize((n) => {
  console.log('Computing...');
  return n * n;
});

console.log(expensiveCalculation(5)); // Computing... 25
console.log(expensiveCalculation(5)); // 25 (cached)

// Memoize with max 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
      const firstKey = cache.keys().next().value;
      cache.delete(firstKey);
    }

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

Event Handlers#

// Closure for event context
function createButtonHandler(buttonId) {
  let clickCount = 0;

  return function handleClick(event) {
    clickCount++;
    console.log(`Button ${buttonId} clicked ${clickCount} times`);
  };
}

// Each button has its own count
const button1Handler = createButtonHandler('save');
const button2Handler = createButtonHandler('cancel');

// Debounce using closures
function debounce(fn, delay) {
  let timeoutId;

  return function (...args) {
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

// Throttle using closures
function throttle(fn, limit) {
  let inThrottle = false;

  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;

      setTimeout(() => {
        inThrottle = false;
      }, limit);
    }
  };
}

const throttledScroll = throttle(() => {
  console.log('Scroll handled');
}, 100);

Partial Application#

// Curry using 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.concat(moreArgs));
    };
  };
}

const add = (a, b, c) => 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, punctuation) {
  return `${greeting}, ${name}${punctuation}`;
}

const sayHello = partial(greet, 'Hello');
const sayHelloExcitedly = partial(greet, 'Hello', 'World');

console.log(sayHello('World', '!')); // Hello, World!
console.log(sayHelloExcitedly('!!!')); // Hello, World!!!

Iterators and Generators#

// Iterator using closure
function createRangeIterator(start, end, step = 1) {
  let current = start;

  return {
    next() {
      if (current <= end) {
        const value = current;
        current += step;
        return { value, done: false };
      }
      return { done: true };
    },
  };
}

const range = createRangeIterator(1, 5);
console.log(range.next()); // { value: 1, done: false }
console.log(range.next()); // { value: 2, done: false }

// State machine using closure
function createStateMachine(config) {
  let currentState = config.initial;

  return {
    getState() {
      return currentState;
    },

    transition(action) {
      const transitions = config.states[currentState]?.on;
      const nextState = transitions?.[action];

      if (nextState && config.states[nextState]) {
        currentState = nextState;
        return true;
      }

      return false;
    },
  };
}

const trafficLight = createStateMachine({
  initial: 'green',
  states: {
    green: { on: { TIMER: 'yellow' } },
    yellow: { on: { TIMER: 'red' } },
    red: { on: { TIMER: 'green' } },
  },
});

console.log(trafficLight.getState()); // green
trafficLight.transition('TIMER');
console.log(trafficLight.getState()); // yellow

Singleton Pattern#

// Singleton using closure
const createDatabase = (function () {
  let instance = null;

  function Database(config) {
    this.host = config.host;
    this.port = config.port;
    this.connected = false;
  }

  Database.prototype.connect = function () {
    this.connected = true;
    console.log(`Connected to ${this.host}:${this.port}`);
  };

  return function (config) {
    if (!instance) {
      instance = new Database(config);
    }
    return instance;
  };
})();

const db1 = createDatabase({ host: 'localhost', port: 5432 });
const db2 = createDatabase({ host: 'other', port: 3306 });
console.log(db1 === db2); // true (same instance)

// Module singleton
const logger = (function () {
  const logs = [];

  return {
    log(message) {
      const entry = { message, timestamp: Date.now() };
      logs.push(entry);
      console.log(message);
    },

    getLogs() {
      return [...logs];
    },

    clear() {
      logs.length = 0;
    },
  };
})();

Loop Closures#

// Classic closure problem
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Logs: 3, 3, 3 (all reference same i)

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

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

// Solution 3: Closure factory
function createLogger(value) {
  return function () {
    console.log(value);
  };
}

for (var i = 0; i < 3; i++) {
  setTimeout(createLogger(i), 100);
}
// Logs: 0, 1, 2

Once Function#

// Execute function only once
function once(fn) {
  let called = false;
  let result;

  return function (...args) {
    if (!called) {
      called = true;
      result = fn.apply(this, args);
    }
    return result;
  };
}

const initialize = once(() => {
  console.log('Initializing...');
  return { initialized: true };
});

console.log(initialize()); // Initializing... { initialized: true }
console.log(initialize()); // { initialized: true } (cached)
console.log(initialize()); // { initialized: true } (cached)

// After function - run after n calls
function after(n, fn) {
  let count = 0;

  return function (...args) {
    count++;
    if (count >= n) {
      return fn.apply(this, args);
    }
  };
}

const logAfterThree = after(3, () => console.log('Called!'));
logAfterThree(); // nothing
logAfterThree(); // nothing
logAfterThree(); // Called!

Best Practices#

Memory:
✓ Be aware of memory retention
✓ Null out large references when done
✓ Avoid creating closures in loops
✓ Use WeakMap for object keys

Performance:
✓ Don't over-closurize
✓ Consider class for many instances
✓ Reuse closures when possible
✓ Profile memory usage

Patterns:
✓ Use for data privacy
✓ Use for factory functions
✓ Use for callbacks with context
✓ Use for memoization

Debugging:
✓ Name your functions
✓ Use descriptive variable names
✓ Add logging in development
✓ Understand scope chain

Closures enable powerful patterns in JavaScript: data privacy, factories, memoization, and more. Understand how closures retain scope, be mindful of memory implications, and use them appropriately for cleaner, more maintainable code.