Closure patterns

Common ways to use closures

The Closures lesson showed one rule. A function can still use the variables from the place where it was made, even after that place has finished running. A function that does this is called a closure.

This lesson shows five common ways to use that rule in real code. Each way is called a pattern: a shape of code that programmers write again and again.

• An IIFE module hides variables and shares only a few methods.
• A factory function makes many objects, each with its own hidden data.
• once lets a function run only one time.
• memoize saves answers, so the same work is not done twice.
• A function factory makes a new function with a setting built in.

The code uses a few tools from earlier lessons:

• function expressions and callbacks (a callback is a function you pass to another function),
• arrow functions, like (n) => n * 2,
• Map, which stores values under keys.

Later lessons go deeper. Memoization & laziness and Currying & partial application build on this one. The Modules stage explains why ES modules replaced most old IIFE modules.

IIFE stands for "immediately invoked function expression". In plain words: a function that is called the moment it is made. It looks like this: (function () { ... })();

• The first pair of round brackets wraps the function. This lets JavaScript read it as a value, so it can be called right away.
• The last pair, (), calls it.

Before ES modules existed, IIFEs were a common way to keep variables out of the global scope. The global scope is the place every script on the page shares. Any script can read or change a variable there, even by mistake. Variables made inside an IIFE stay inside it.

The module pattern adds one more step. The IIFE returns an object with methods. The methods can use the IIFE's variables, but outside code can't. In the code below, count is hidden. The returned increment() and get() methods are the only way to use it.

1const counterModule = (function () {Run2  let count = 0;3  console.log("IIFE ran once");4  return {5    increment() {6      count += 1;7      return count;8    },9    get() {10      return count;11    },12  };13})();14 15console.log(counterModule.count);16console.log(counterModule.increment());17console.log(counterModule.increment());18console.log(counterModule.get());

Three things to notice in the step-through:

• The setup message printed once.
• counterModule.count was undefined.
• The methods still changed count, from 0 to 1 to 2.

New code usually uses ES modules instead. You will still see IIFE modules in older scripts and libraries. The Why modules? lesson explains that history later.

An ES module is a file that chooses what to share. It marks the things it shares with export, and other files get them with import. Names that are not exported stay inside the file. If the module later changes an exported variable, files that imported it see the new value.

const settings = {
  theme: "light",
};

export function getTheme() {
  return settings.theme;
}

Line 1 makes settings. It is not exported, so it stays inside this file. Line 5 exports getTheme, so other files can import it by name. In a browser, the file must be loaded with type="module" on its script tag.

A factory function is a normal function that makes and returns a new value, often an object. You don't need new or class. With closures, each call to the factory can also make its own hidden variables.

1function createAccount(owner, balance) {2  return {3    deposit(amount) {4      balance += amount;5      return balance;6    },7    withdraw(amount) {8      balance -= amount;9      return balance;10    },11    getBalance() {12      return balance;13    },14    label() {15      return owner + ": ₹" + balance;16    },17  };18}19 20const ada = createAccount("Ada", 40);21const grace = createAccount("Grace", 15);22ada.deposit(10);23grace.withdraw(5);24console.log(ada.label());25console.log(grace.label());26console.log(ada.balance);

Lines 20 and 21 call createAccount twice. Each call makes its own owner and balance variables. Line 22 adds 10 to Ada's balance, and line 23 takes 5 from Grace's. Line 26 prints undefined, because the object has no balance property.

The methods use the balance variable, not this.balance. (this is the object a method was called on.) That has a benefit: you can save a method in another variable, call it alone, and it still works. There is a cost too: each call to the factory makes new copies of all four methods. Classes can also hide data, with #private fields. A later Classes lesson covers them.

A wrapper is a function that takes a function and returns a new function. The new function adds a small job around the original one, and it keeps what it needs to remember in a closure.

once(fn) is a wrapper that lets fn run only one time. The first call runs fn and saves its answer. Every later call skips fn and returns the saved answer. Use it for setup that must happen only once, like connecting to a server. Then a second call by mistake does no harm.

1function once(fn) {2  let called = false;3  let firstResult;4  return function (...args) {5    if (!called) {6      called = true;7      firstResult = fn(...args);8    }9    return firstResult;10  };11}12 13let runs = 0;Run14const welcome = once((name) => {15  runs += 1;16  return "Welcome, " + name;17});18console.log(welcome("Ada"));19console.log(welcome("Grace"));20console.log(runs);

memoize(fn) is a wrapper that saves answers. The first time it gets some inputs, it runs fn and saves the answer under a key made from those inputs. The next time the same inputs come in, it returns the saved answer and skips the work. Saved answers like these are called a cache. Here the cache is a Map kept in a closure. In the code below:

• Line 2 makes the cache, an empty Map.
• Line 4 turns the inputs into a text key with JSON.stringify. For example, the input 4 becomes the key "[4]".
• Line 5 returns the saved answer if the key is already in the cache.
• Lines 6 to 8 run fn, save its answer, and return it.

The experiment uses fib(n), which finds a Fibonacci number. In the Fibonacci numbers (0, 1, 1, 2, 3, 5, 8, ...), each number is the sum of the two before it. The plain version calls itself for the same smaller numbers again and again. The experiment counts the calls of both versions.

1function memoize(fn) {2  const cache = new Map();3  return function (...args) {4    const key = JSON.stringify(args);5    if (cache.has(key)) return cache.get(key);6    const result = fn(...args);7    cache.set(key, result);8    return result;9  };10}

A function factory is a function that returns a new function with a setting built in. You give the setting once, in the outer call. The returned function remembers it through a closure. The code below has three function factories:

• makeMultiplier(3) returns a function that multiplies by 3.
• makeGreeting("Hello") returns a function that says Hello to a name.
• makeValidator({ min: 5, max: 12 }) returns a function that checks if a number is from 5 to 12.

1function makeMultiplier(factor) {2  return function multiply(number) {3    return number * factor;4  };5}6 7function makeGreeting(greeting) {8  return function greet(name) {9    return greeting + ", " + name + "!";10  };11}12 13function makeValidator({ min, max }) {14  return function isInRange(value) {15    return value >= min && value <= max;16  };17}18 19const triple = makeMultiplier(3);20const hello = makeGreeting("Hello");21const isChildAge = makeValidator({ min: 5, max: 12 });22console.log(triple(7));23console.log(hello("Ada"));24console.log(isChildAge(9));

Line 19 calls makeMultiplier(3) and saves the returned function as triple. Line 22 calls triple(7) and prints 21. Lines 23 and 24 print Hello, Ada! and true, because 9 is from 5 to 12.

Later, the Currying & partial application lesson changes the shape of functions in a stricter way. For now, remember one habit: put the setting in the outer call, and put the input that changes in the call to the returned function.

Where you’ll use this

Use a closure pattern when you want a few functions that remember something, but you don't want other code to touch that memory directly. Some examples:

• a part of a page that keeps a counter,
• a form helper that keeps its checking rules,
• a data helper that remembers recent answers.

These patterns are plain JavaScript. They work anywhere JavaScript runs, not only in the browser.

Partial application means giving a function one argument now and the rest later. It is useful when a callback needs the same setting every time, like a tax rate or a user ID. It is related to currying, which turns a function into a chain of functions that each take one argument. Partial application is simpler: fix some arguments now, and pass the rest later.

1function partial(fn, firstArg) {2  return function (secondArg) {3    return fn(firstArg, secondArg);4  };5}6 7function addTax(rate, amount) {8  return amount + amount * rate;9}10 11const addTenPercent = partial(addTax, 0.10);12console.log(addTenPercent(50));

• Line 1 makes partial. It returns a new function that remembers firstArg.
• Line 7 makes addTax, which needs a rate and an amount.
• Line 11 gives partial the rate 0.10 now.
• Line 12 gives only the amount, 50, and prints 55: 50 plus 10% of 50.

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const saveSearch = debounce((query) => console.log("saved: " + query), 10);
saveSearch("t");
saveSearch("te");
saveSearch("tea");

setTimeout runs a function after a delay, and clearTimeout cancels one that hasn't run yet. Each call to saveSearch cancels the old timer, then starts a new one. The three calls pass "t", "te", and "tea". Only the last timer gets to run, so the code prints saved: tea.

A real search box usually needs one more method, cancel, which stops a waiting timer. Call it when the search box is removed from the page. Otherwise a late timer can still run and try to update a part of the page that is gone.

Debounce is different from throttle. Debounce waits for a quiet gap. Throttle lets the work run at most once in each set time, even while calls keep coming.

1function makePreview() {2  let rows = ["order 1", "order 2", "order 3"];3  return {4    size() {5      return rows.length;6    },7    clear() {8      rows = [];9      return rows.length;10    },11  };12}13 14const preview = makePreview();15console.log(preview.size());16console.log(preview.clear());

A closure keeps alive every value it can still reach, even a large array. That is useful while the page needs the data. But if the closure lives a long time, for example inside an event listener, it keeps the data long after you stopped needing it.

Line 2 makes rows, an array that both methods use. Line 8, inside clear(), puts an empty array in its place, so JavaScript can free the memory the old array used. The code prints 3, then 0. In a real app, also remove event listeners and drop your saved copy of the returned object when that part of the page goes away.

1function memoize(fn) {2  const cache = new Map();3  return function (value) {4    if (cache.has(value)) return cache.get(value);5    const result = fn(value);6    cache.set(value, result);7    return result;8  };9}10 11function makeIdGenerator(prefix) {12  let next = 1;13  return function id() {14    const value = prefix + next;15    next += 1;16    return value;17  };18}19 20function createToggle(initial = false) {21  let on = initial;22  return {23    flip() {24      on = !on;25      return on;26    },27    value() {28      return on;29    },30  };31}32 33const square = memoize((n) => n * n);34console.log(square(4));35const nextTodoId = makeIdGenerator("todo-");36console.log(nextTodoId());37console.log(nextTodoId());38const toggle = createToggle();39console.log(toggle.flip());40console.log(toggle.value());

Each function at the top makes a small tool that remembers something:

• Line 1, memoize, remembers answers. This short version takes one input and uses it as the key.
• Line 11, makeIdGenerator, remembers the next number to use.
• Line 20, createToggle, remembers whether it is on or off.

Line 34 prints 16, the square of 4. Lines 36 and 37 print todo-1 and todo-2, because next goes up by 1 after each call. Line 39 flips the toggle from false to true and prints true. Line 40 reads it and prints true again. In each case, the caller gets a simple function or object and never handles the remembered variable itself.

Factories or classes?

Factories and classes can both make many similar objects. Pick the one that makes your code clearest to you and your team.

Here is one difference you can test. Save a method in a new variable and call it alone. The factory method ada.getBalance still works, because it reads its balance variable directly. A class method that reads this.balance loses its object when it is called alone. To fix that, call it as ada.getBalance(), or save ada.getBalance.bind(ada), which fixes this to ada.

The table below compares the two. Read each row as a question, then compare the two answers.

Common misconceptions

• “An IIFE runs later, like a timer.” It is a normal function call. It runs right away, and the next line waits until it finishes.
• “Hidden means safe from all code.” Other code can't read a hidden variable directly. But the methods you return still decide what other code can do with it.
• “All objects from one factory share the same data.” They share the same code. Each call makes new variables, unless the factory uses a variable from outside itself on purpose.
• “Memoize always makes code faster.” It helps when the same slow call repeats. It also costs time to build keys and look them up, and memory to store the answers.
• “Every function factory is currying.” They are related. Currying is one exact shape: a chain of functions that each take one argument. The Currying & partial application lesson covers it.
• “Closures always waste memory.” A closure keeps the values it can still reach. That is often what you want. Only closures that live a long time and hold large data need care.

Key takeaways

• An IIFE runs as soon as it is made. In the module pattern, it returns methods that use its hidden variables.
• Each call to a factory function makes a new object with its own hidden data.
• once remembers whether it has run. memoize remembers answers it already worked out.
• A function factory takes a setting in the outer call and returns a function that remembers it.
• A closure keeps alive the values it uses, so large data in a long-lived closure costs memory.

Closure patterns are common ways to use functions that remember hidden variables, to build small, safe tools.

Up next: Closures in loops, timers & memory.