September 02, 2021
0 strokes bestowed

What is a Closure?

edit

In JavaScript, and some other languages, too, there is the concept of a "closure". This concept can be confusing at first, but once understood, can become a useful tool in your repertoire. I want to help you discover how useful it can be.

In short, a "closure" occurs when a bit of "state", created inside of a function body, is exposed, with some indirection, to the outside world in the function's return. To make sense of this, let's break down a few things.

This is a function.

function() {}

When I create values inside of this function, they are scoped to the body, the {}, of the function. They cannot be accessed from outside of the function body.

function counter() {
  let count = 0
}

console.log(count) // Uncaught ReferenceError: count is not defined

If I return the count, the outside world can access the value, but it has no means of updating the value. Think of this as a bit of "state", but one that cannot be updated.

function counter() {
  let count = 0
  return count
}

const count = counter()

console.log(count) // 0

If instead of returning the count, I instead return an object that gives you access to reading the current count and methods for updating count, I will have exposed a bit of "state" that can be updated.

function createCounter() {
  let count = 0

  return {
    /**
     * Read the current state
     */
    state: () => count,
    /**
     * Increment the state by 1
     */
    increment: () => {
      count++
    },
    /**
     * Decrement the state by 1
     */
    decrement: () => {
      count--
    },
  }
}

const counter = createCounter()

console.log(counter.state()) // 0
counter.increment()
counter.increment()
counter.increment()
console.log(counter.state()) // 3

Now, I have a bit of state from our createCounter function body that is held in the memory of my program so long as I still have access to the returned counter object. That is the closure.

I can read that state, I can update that state, but not directly. I do it indirectly through the API established by the returned object. Can you start to see how useful this is?

This method can be used to create persistent state for the life of our program, it can be used for partially applying values to curried functions, it can be used to create truly private functions and values, something we don't yet have for classes in JavaScript. The applications are numerous.

I highly encourage you try making a few simple closures (if you haven't before), to get the hang of it. I think it can be a real eye opener, and you'll start to think of the returns of your functions as little APIs that your program interacts with.

Summary

A closure is created when state held inside of a function body is exposed to the world outside of that function through its return value. It remains accessible, albeit indirectly, so long as the returned value exists in the program.


Finished reading?

Here are a few options for what to do next.

Like
Liked the post? Click the beard up to 50 times to show it
Share
Sharing this post on Twitter & elsewhere is a great way to help me out
Support
Was this post valuable to you? Make a donation to show it
Make a Donation
Kofi logo

Newer Post: Comparing `useRef` and `useState`
Tags
JavaScriptComputer Science

Let's talk some more about JavaScript, React, and software engineering.

I write a newsletter to share my thoughts and the projects I'm working on. I would love for you to join the conversation. You can unsubscribe at any time.

Introduction to State Machines and XState Logo
Introduction to State Machines and XState

Check out my courses!

Liked the post? You might like my video courses, too. Click the button to view this course or go to Courses for more information.
View on egghead.io
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, React and front end web development.