Closures in JavaScript

What is a closure?

A closure lets a function keep using variables from the place where it was created. An outer function can finish, and a function created inside it can still read those variables later.

We’ll start with a function that remembers a short message. Then we’ll use a counter to see that a remembered variable can change too.

You don’t need special syntax to create a closure. JavaScript functions form closures when they are created. Returning a function simply makes that behavior easier to observe.

Click the blue line, or use Step, to follow the code one event at a time. The app explains each jump into a function, each variable change, and each return. Use Back whenever you want to compare what just changed.

Start with a nested function

Nested just means one function is written inside another. The inner function can read variables from the outer one. JavaScript calls this lexical scope.

In this example, message is the text "Hello!" passed to createGreeting. That outer function returns greet, an inner function that reads the text. Step inside the first call, watch it return, then follow the second call back to the remembered variable.

1function createGreeting(message) {2  return function greet() {3    return message;4  };5}6 7const greet = createGreeting("Hello!");Run8greet();

Separate these two moments:

1. Line 7 creates: createGreeting("Hello!") returns a function. We store that function in greet. The outer call is now finished.
2. Line 8 calls: greet() runs the inner function, which still reads message from that finished outer call.

That continued access to message is the closure. The variable did not need to be global, and we did not pass it into greet().

A greeting reads a variable. A counter goes one step further: it changes a variable and remembers the new value on the next call.

Step follows execution into each function instead of skipping straight to its result. Watch the count change beside its declaration. After the walkthrough, choose another call and follow that one too.

1function makeCounter() {2  let count = 0;3  return function increment() {4    count += 1;5    return count;6  };7}8 9const a = makeCounter();Run10a();11a();12 13const b = makeCounter();14b();

One factory, separate memories

Each call to makeCounter() creates a new lexical environment with its own count. But assigning const b = a gives the same function another name. It does not call the factory again.

Follow a(), then b(), then a() again. Change line 10 and replay the path. With b = a, notice that JavaScript never makes the second trip into makeCounter().

1function makeCounter() {2  let count = 0;3  return function increment() {4    count += 1;5    return count;6  };7}8 9const a = makeCounter();Run10const b = makeCounter();11a === b;12a();13b();14a();

This distinction matters: a new factory call creates new state; another reference to the same function does not.

A practical use: private state

Imagine a shopping cart whose item count should only change through an add method. A closure lets you keep that state out of the global scope while exposing a small, intentional API.

Start with the empty cart. Follow the creation of items, then the update inside add(). At line 16, use Back and Step to compare the property assignment with the private variable that stays unchanged.

1function createCart() {2  let items = 0;3  return {4    add() {5      items += 1;6      return items;7    },8    getCount() {9      return items;10    }11  };12}13 14const cart = createCart();Run15cart.add();16cart.items = 99;17cart.getCount();

add and getCount are created in the same call to createCart, so they share one items binding. Neither method gets a frozen copy of its value.

The binding is not accessible as cart.items. Even assigning a new property with that name would not change the closed-over variable. Calling createCart() again would create a separate cart with separate state.

You’ll also see closures in event handlers that retain configuration, debounce functions that retain a timer, and callbacks that use values from their surrounding code.

Common misconceptions

A closure does not freeze every value, and it does not keep every expression up to date. Here, one function reads the current count; another reads a message string computed when the factory ran.

1function createReaders() {2  let count = 0;3  const message = `Count is ${count}`;4  return {5    increment() {6      count += 1;7      return count;8    },9    live() {10      return `Count is ${count}`;11    },12    saved() {13      return message;14    }15  };16}17 18const readers = createReaders();Run19readers.increment();20readers.live();21readers.saved();

Using the same makeCounter from the playground, what will these three calls return?

const counter = makeCounter();
const alias = counter;

counter(); // ?
alias();   // ?
counter(); // ?

Key takeaways

• A closure is a function plus access to its surrounding lexical environment.
• The outer function can finish while the returned function still accesses its variables.
• Closures retain bindings, not frozen copies of values.
• Separate factory calls create separate state. Functions from the same call can share state.