[JS “1st timer”] Closure

Javascript has one useful but difficult specification which is called “Closure”.

Let me explain the initial part of what is “Closure” is for 1st timers who study about it.

“Closure” allows us to invoke a function that contains another function.

Yeah, I know what that means…, let’s take a look at below snippet first.

const add2 = (x) {
 return x + 2;
};
add2(1); // return 3

It is a simple function that takes one argument “x” and adds “2” to “x”, then returns the added value. So, the return value of add2(1) is 3.

In this example, I put “2” inside the add2 function, that’s why the input number always returns the value of x plus 2.

add2(1) returns 3

add2(10) returns 12

add2(10000) returns 10002 etc…

You may be wondering how this function is related to “Closure”.

What happens if you’d like to change the fixed number 2 to another number?

addAnyNumber = (x) {
 return x + ?;
}
addAnyNumber(1) // return 1 + some number you decided

One thing we can do is this:

let number = 3;
addAnyNumber = (x) {
 return x + number;
}
addAnyNumber(1) // return 4 

In the above example, I declared the variable “number” and assigned 3 to the variable. Then, I used the variable inside the function “addAnyNumber”, so the returned value is 4.

However, in this case, we have to go back to the variable “number” and change the number manually every time. It’s so annoying, right?

I want to create a function where I can give a fixed number and return the calculated value with an argument.

“Closure” allows us to do this.

Let’s have a look at the example below.

const addAnyNumber = (x) => {
 return function (y) => {
   return x + y;
  };
};
const add = addAnyNumber(3);
add(2) // return 5;

Umm… it looks weird because the function “addAnyNumber” returns a “function”.

But in this example, it seems like “x” = 2, “y” = 3 then returns 5.

Let me explain a part of the process of this function.

1. function “addAnyNumber” takes argument 3, and assigns to the variable “add”.
2. The variable “add” contains the return value of “addAnyNumber”.

Do you know what the return value of addAnyNumber is?

…Yes, it is a “function”.

So, the variable “add” contains the function below.

//inside variable "add"
function(y) => {
  return x + y;
};

Wait… what is “x”?

We know “y” is from the parameter, but where does “x” come from?

Please go back to the snippet of the function “addAnyNumber” again.

The variable “add” contains a “function” which is the return value of function “addAnyNumber”.

Do you remember what is the argument of “addAnyNumber”?

…Yes, it is 3.

Let me modify what is inside the variable “add” correctly.

//inside variable "add"(correct version)
function(y) => {
 return 3 + y;
};

Let me repeat the process explained previously about “addAnyNumber”, and add 1 more sentence.

1. function “addAnyNumber” takes the argument 3, and assigns to the variable “add”.
2. The variable “add” contains the return value of “addAnyNumber” which is a “function” and variable “x” which contains 3.

This behavior is called “Closure”.

Let me recap the whole process of “addAnyNumber” line by line.

const addAnyNumber = (x) => {
  //parameter "x" is a variable and contains 3 because I invoked addAnyNumber(3). 
  
  return function (y) => {
    // addAnyNumber returns a function which holds variable "x" that was assigned to 3.       
    return x + y;
      //"local anonymous function" returns value "x + y".
  }; //closing bracket for local anonymous function
}; //closing bracket for function "addAnyNumber
const add = addAnyNumber(3);
  //declare variable "add" and assign "addAnyNumber(3)" to the variable.
add(2);
//invoke variable "add" with argument 2, which returns 5 (3+2)

In other words, “Closure” contains a package of “function” and “local variable”. ( x = 3 in this example. It is called “lexical environment”)

This is the very first point to understand about “Closure”, and I hope it helps you briefly understand what “Closure” is.