The ABCs of JavaScript Closure: Everything You Need to Know

Photo by miheer tewari on Unsplash

Consider having a unique box where you can keep some of your toys. You can place your toys in the box, secure the lid, and return to playing with them later. Closure in JavaScript is somewhat similar to that.

JavaScript closure is a powerful concept that allows a function to access and manipulate variables defined in its outer scope, even after the outer function has finished executing.

A JavaScript closure is when a function can remember and access things (like your toys in the box) from outside of itself (like the box). This is helpful because it lets the function do things with the things it remembers, even after it’s done running and the outside things aren’t available anymore.

For example, let’s say you have a function that adds two numbers together. You can call this function with two different numbers, like 3 and 4, and it will give you 7. But what if you always want to add 5 to the number you give the function? You can use a closure to do that!

First, you would make a special function that takes one number and returns a new function. Inside this new function, you would add the number you gave it to 5 and then return the result. Now, whenever you call the special function with a number, it will give you back a new function that adds 5 to that number. You can call this new function as many times as you want and it will always add 5 to the number you give it.

That’s a JavaScript closure! It’s like a special box for your functions that lets them remember things from outside of themselves and use them to do clever things.

One of the most common examples of JavaScript closure is the use of a callback function. A callback function is a function that is passed as an argument to another function, and is executed after the outer function has completed its execution. Here is an example:

function outerFunction(x) {
  return function innerFunction(y) {
    return x + y;
  }
}

const addFive = outerFunction(5);
console.log(addFive(10)); // 15

In this example, the outerFunction takes a single argument x and returns a new function, innerFunction, that takes a single argument y. When innerFunction is executed, it adds x and y together and returns the result.

However, the real power of closure comes into play when we look at how the innerFunction is able to access and use the value of x, even after the outerFunction has finished executing. In this example, we call outerFunction with the argument 5, which sets the value of x to 5. Then, we store the returned innerFunction in a variable called addFive.

When we call addFive with the argument 10, the innerFunction is executed and it adds x and y together to give us 15. But here's the interesting part: even though outerFunction has already finished executing, the innerFunction still has access to the value of x that was set when outerFunction was called! This is because of JavaScript closure.

In summary, JavaScript closure is a powerful property that allows inner functions to access and manipulate variables defined in their outer scope, even after the outer function has finished executing. By leveraging closure, we can write more modular and reusable code in JavaScript.