Using closures
Tags: javascript
Published: 2019-08-15 07:57:21

---
title: Using closures
published: true
tags: javascript
canonical_url: https://hellocode.dev/using-closure
cover_image: https://cdn.pixabay.com/photo/2017/02/19/13/03/road-closed-sign-2079685_960_720.jpg
---

When I was learning about closures in JavaScript for the first time I saw a lot of examples like this:

```js
const counter = (function() {
  let count = 0
  return function() {
    count++
    return count
  }
})()

console.log(counter()) //1
console.log(counter()) //2
console.log(counter()) //3
```

Now, it was pretty clear to me what was happening; the outer function (which is an Immediately Invoked Function Expression or IIFE for short) declares the `count` variable, assigns the number zero to it and then returns the inner function. This inner function is executed each time we call `count()` and 'knows' about the `count` variable because it has closure over it.

So all well and good. The bit that was not clear to me was _why_ this would be useful! As such, I would like to demonstrate a couple of ways in which I use closures in my daily coding.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Example one

The first technique is encapsulation. This is a way of creating a module where the inner workings are private and only certain methods are exposed for other modules to interact with them. It is exactly what is happening in the example above but it is (hopefully!) easier to see why it is useful when we look at some code which has a bit more going on.

```js
const library = (function() {
  const books = ['Island', '1984', 'Dracula', 'Papillon']

  return {
    getBooks() {
      return [...books]
    },
    deleteBook(title) {
      books.splice(books.indexOf(title), 1)
    },
    addBook(title) {
      books.push(title)
    },
  }
})()

library.addBook('catch 22')
library.deleteBook('Dracula')
console.log(library.getBooks()) // [Island, 1984, Papillon, catch 22]

const libraryBooks = library.getBooks()
libraryBooks.push('Beowulf')
console.log(libraryBooks) // [Island, 1984, Papillon, catch 22, Beowulf]
console.log(library.getBooks()) // [Island, 1984, Papillon, catch 22]
```

As you can see, our `books` array is protected from the outside world by the inner function's closure over it. The only way to interact with it is through the public methods; `getBooks()` returns a copy of the array instead of a reference to it and books can only be added or deleted one at a time.

## <svg aria-hidden="true" focusable="false" height="16" version="1.1" viewbox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>Example two

The second example is a pattern I use frequently. I will use a React component to demonstrate, don't worry if you don't know React, it is pretty easy to see what is happening.

```js
class StartEndDate extends React.Component {
  state = {
    start: null,
    end: null
  }

  // This is our closure, I have used es6 arrow functions this time
  updateTime = startOrEnd => newTime => (
    this.setState({
      [startOrEnd]: newTime
    })
  )

  render() {
    return (
      <DateInput label="From" updateTime={this.updateTime('start')} />
      <DateInput label="To" updateTime={this.updateTime('end')} />
    )
  }
}

function DateInput({ label, updateTime }) {
  return (
    <label for="timeInput">From</label>
    <input id="timeInput" type="time" onChange={updateTime}>
  )
}
```

In this code we have one stateful React component, which is declared as an es6 class and one functional component. You should be able to see where the functional component is used, it is in the return of the `render` method (the code that looks like HTML is actually JSX; it calls the `DateInput` function, passing the props `label` and `updateTime` to it).

The `DateInput` function returns the markup for a `<label>` and `<input>`. When a change event is detected, the value is passed through to the `updateTime` method on the `StartEndDate` class.

If you look at the `render` method where this function is passed to `DateInput`, it is first called with either the value "start" or "end". Our two inputs now have their own version of the `updateTime` method which has closure over the `startOrEnd` variable. Using computed property keys we can dynamically assign the new value to the component's state using the variable in closure.

* * *

These are two of my most often used closure patterns. I hope that I have been able to show why they are such a useful feature of the language and an important tool to have in your tool-set.