Understanding Closure in JS with the other fundamental concepts

The closure is important because it decides how data will behave inside a particular function scope. It also decides how the variable data will be carried between interrelated functions.

To Understand JS Closure and its behavior we need to understand, few fundamental things first and then how they work together in the JS environment. Let’s start with,

Lexical scoping:

It determines how the parser resolves the variables when the function is nested. For example, we have the following nested function structure;

In this condition, output,

I am from inside

Why? Because in the current function oneVariable is available. Now, if we comment the red line, It will print the following in the console.

I am from outSide

And if we comment both the red and green line it will print,

I am from outerSide

This is interesting. That means if the variable is not available in the current block, it will start looking for the availability by going one level up in the nested blocks and it will go further till the root unless it gets what it is looking for. When there is no data till the root block (for example if we commented out all red, green and blue lines), then,

it is a ReferenceError: oneVariable is not defined…

Pretty cool. Now let’s jump into another concept called,

Hoisting:

In Js, all the variables and the function declarations move to the top of their scope (actually it allocates the memory first) at the beginning of execution. This is called Hoisting.

• It only takes the declaration to the top, not the assignments.
• No matter if the scope is local or global it will take to the top of their scope.

Now, these examples,

This is ok. We are printing the variable after we declared and defined it. Next,

Now, this is a bit funny. We declared the variable later but using it before that and we are not getting any error. This is because even we declared it later in the code, but the memory allocation for the variable is done at the beginning of the execution. It is undefined, cause the assignment was not added until when the block of code is executed.

This is also normal as the current variable is not declared or defined anywhere.

First-Class Function:

In JS, functions are a first-class object. It means you can use the function as an argument in a function. You can return a function from a function as well.

In JavaScript function is a first-class function, hence, it can be treated as a variable in the language. In javascript,

• A function can be passed as an argument to a function.
• We can return a function from another function,
• A function can be assigned as a value to a variable,
• It can hold its own properties.
• It can be stored in some data structure.

All of the above

Closure:

We have collected some of the building blocks,

• Lexical scoping
• Hoisting
• Functions as the first-class citizen

so let's understand the closure now,

Function inside another function has access to the outer function variable as they share a lexical scope. Now if the outer function returns the inner function, it will return the content of the lexical scope (outer function’s variables as well) along with the inner function’s definition. We can use that and manipulate the content of the outer functions even after that function is executed and returned.

Let’s think, Each function carries its own bag. So when the function definition is created all the variables in the scope are captured in that bag.

How To Create a Closure:

For each function creation time, a closure is created. So if we assign a function to a variable, that variable will contain a function definition as well as a closure.

To Use a Closure:

Define a function inside another function and return it or pass it to another function.

Here the input2 only can be manipulated when an instance of blockA is created. This way we can have the benefit of private variable scope in javascript as it doesn’t have native support for that.

Why do We use Closure?

• Mainly to give the data privacy to the object we use closure.
• Without changing the structure of the code creating many instances of different shaded operations just based on the combination of the data.

Fine Reads:

Closures

Conclusion:

Using closure in the JS can open a new world of control and possibilities in the code flow. It will take some practice with real-life examples. Every time you create a function in your JS, think with how you can fit in the closure for the betterment of the flow. Let me know how you come up with something related to it. [twitter: beingsagir]

:) Take care of your health.