What Do You Know About JavaScript Closures?
Tags: javascript, beginners, closures, react
Published: 2019-12-29 21:32:37

When I was reading some articles to be inspired and get new ideas for the following blog post to write, my eyes captured JavaScript closures. The first instinct was that I heard about it and probably know it. But when I imagine trying for someone to explain it, I realized that I really don't know what it is beside the fact that probably it is closing something in the scope... So I went back to the basics, reading articles, documentation, watching YouTube and playing PS4 in between to stay sane. And this is what I found out about this topic.

## But Why You Should Care About Learning It

Job interviews for one. If you can explain one of the most confusing topics, it will strengthen your position to get a job.
The second reason, more personal for me, would be the React framework. The React Hook API and functional components are heavily based on closures. You'll have a better understanding of how the hooks operate.

## So What Are Closures?

In JavaScript, closures are functions that have access to a surrounding (parent) scope. Closures are created every time when a function is created. With the help of closures, functions can hold a state or have local (private) variables, that can be accessed even after the parent function was invoked and closed.
Let's examine the following example:

```js
function outer() {
  const message = "Hello"; // local variable

  function inner() { // a closure function
    return message;
  }

  return inner;
}

const greeting = outer();

greeting() // will return a message "Hello"
```
Here we have a `message` variable inside the `outer` function. It is a local variable and cannot be accessed outside the parent function. Unless we create a closure function `inner` inside the parent, that has access to the outer scope and a variable `message`. Also, it is important to return closer function without invoking it.
When we assigning function `outer` to the variable `greeting`, a few things happen:
1. `outer` function runs once and returns a closure function;
2. `outer` function closes itself
3. `greeting` variable became function declaration, and now has access to a closure `inner` and the `message` variable.

Now that `greeting` function became a function declaration, it can be invoked, and the returned result will be a message from the `outer` function.

This might be a little bit weird, taking into consideration, that the `outer` function was invoked once and closed itself. For some programming languages, local variables exist only during the lifetime of the function execution. But not in JavaScript. Here functions create closures with all surrounding environment, like variables that are in scope, at the moment they created.
The `greeting` function has a reference to the closure function `inner`. The latter was created during the `outer` function execution and holds its environment, in which the variable `message` exists.

## Where Can It Be Used

Probably you already used it without knowing it, especially if you used the React framework. All event handlers of the functional components are closures.
Also, closures can be used to emulate private methods for functions, similar to class methods. For example:

```js
function setCounter() {
  let _counter = 0;
  
  function changeCounter(value) {
    _counter += value;
  }

  return {
    increment: () => changeCounter(1),
    decrement:() => changeCounter(-1),
    getValue: () => _counter,
  };
}

const counter = setCounter();

counter.getValue() // returns 0
counter.increment()
counter.getValue() // returns 1
```
In the counter example we use closures `increment`, `decrement` and `getValue` as a public function methods. They have access to the `_counter` value of the function. Besides those methods, there's no way to access the `_counter`.

Let's build another stateful function:

```js
function useState(initialValue) {
  let _val = initialValue;

  const state = () => _val;
  const setState = (newValue) => {
    _val = newValue
  };

  return [state, setState];
}

const [count, setCount] = useState(0);

console.log(count()) // returns 0
setCount(5);
console.log(count()) // returns 5
```
In the latter example we have two closure functions: `state` that returns a current state of `_val` variable, and a `setState` which modifies `_val` variable by changing its value. And it is a very very primitive implementation of the React `useState` hook.

## Sum Up

Closures are a difficult and interesting topic. When decided to learn and write about it, I didn't realize how broad and confusing topic it is. The examples in this article are very primitive and short ones but I hope you will get a better understanding of it, especially how the functions can hold a state.