Closures In JavaScript

Like i said in my previous post about stale closures in React and JavaScript (Check my page for more info!), i'm here to talk about closures in detail in this post.

So, what are closures?

In order to understand closures, first we have to talk about something called Lexical Scoping.

Check the following example:

const outerFunc = () => {
  const name = "Khan";

  const innerFunc = () => {
    console.log(name);
  }

  return innerFunc;
}

"A lexical scope in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration."

In the example i gave, the function innerFunc has access to the name variable because it's lexical scope is inside the outerFunc function and after the declaration of the name variable.

Now, with the information we have, let's check out what a closure is from the example below.

const outerFunc = () => {
  const name = "Khan";

  const innerFunc = () => {
    console.log(name);
  }

  return innerFunc;
}

const nameLogger = outerFunc();

nameLogger(); // Will log "Khan" to the console

But how does the innerFunc remember the name variable, even after the outerFunc has been invoked and the name variable isn't in the scope anymore?

This is called a closure in JavaScript. The function innerFunc closed over the outer variable name, and is able to remember it even after the outerFunc function has been invoked because of this.

Closures has many use cases. Like the example below:

const adder = (x) => {
  return (y) => x + y;
}

const addTwo = adder(2);
const four = addTwo(2);

console.log(four); // Will log 4

In the example above, we used closures to make an adder function, in which the returned arrow function inside the adder function will still remember variable x, because it closes over it.

The function generator in the example above is also called Currying, which means we use functions to create other functions which might help reduce the amount of code we write. If not for currying and closures, we would have to do something like this:

const addTwo = (x) => x + 2;
const addFour = (x) => x + 4;
const addTen = (x) => x + 10;

Thanks to closures, we're able to reduce the amount of code we write and we can make our code much cleaner.

CONCLUSION

Closures are a very essential part of JavaScript, and it can be used in many ways. For example, React hooks rely heavily in closures. If you want to see how, you can check out my article Avoid Stale Closures in React. It might help you out understand closures better and how it can also create pitfalls in your code by accident if not used correctly.

And as always, thank you so much for reading my article to this point! If you think i have mistakes, feel free to write them in the comments. I will absolutely check out all of them and make the correct changes in my article.