Kyle Shevlin

Software Engineer
September 02, 2021
0 strokes bestowed

What is a Closure?


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: () => {
     * Decrement the state by 1
    decrement: () => {

const counter = createCounter()

console.log(counter.state()) // 0
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.


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?

Liked the post? Give the author a dopamine boost with a few "beard strokes". Click it up to 50 times show your appreciation.

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

Are you, or the company you work for, struggling with something mentioned in this article?
Would you benefit from a live training session?
Let's Talk
Kyle Shevlin's face, which is mostly a beard with eyes
Kyle Shevlin is a software engineer who specializes in JavaScript, TypeScript, React and frontend web development.

Let's talk some more about JavaScript, TypeScript, 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.

Just Enough Functional Programming Logo
Just Enough Functional Programming

Check out my courses!

Liked the post? You might like my courses, too. Click the button to view this course or go to Courses for more information.
View on
I would like give thanks to those who have contributed fixes and updates to this blog. If you see something that needs some love, you can join them. This blog is open sourced at
©2023 Kyle Shevlin. All Rights Reserved.