Back to Top

What is Closure in JavaScript?

JavaScript-closure

A Closure in JavaScript is the wonderful feature of ECMAScript.Closures in JavaScript is not a function but technique which allows you to create nested functions.

What is Closure in JavaScript?

A closure is a function that has access to variables in another function scope.The closure is a difficult part of javascript. You must first understand the scope of the variables in Javascript to understand the Closures in JavaScript.

A function is the only structure in JavaScript that has its own scope, so the creation of a closure depends on the function. According to ECMAScript, Closure is lexically represents a function that includes a variable that is not evaluated and the function which can use variables that are defined outside of the function so the current scope always has access to that variable in the outer scope.

What are the scope in Javascript?

There are three levels of scope in Javascript to create a variable or a function

Global Scope: The Global scope variables are variables defined outside a function are accessible in the function. They can be changed outside the function as well as by the function itself. Those variables are known as global in scope.

Local scope: The Local scope variables are variables defined within a function as well as the parameters of a function are only available inside the function. Those variables are known as a Local scope.

Lexical scope: The Lexical scope is also known as static scope which runs in the scope in which they are defined, rather than the scope of execution.The closure is more of Lexical closure with lexical scope. The Lexical closure is a block of code with the data of the context in which this block is generated.

Let’s take a look at the following example:

The above code explains that the scope of the variable using outer and inner functions in Javascript. Variable in the inner function is limited to the local scope and is not visible outside the inner function but declare in outside function will be visible inside the inner function. As the innerfn() function can read the outerfn() function variable and will change the value while go into the innerfn().The Variable I defined outside the innerfn function but in the outerfn are accessible in the function. They can be changed outside the innerfn() function as well as by the function itself.

The above function has two characteristics:

1. The function innerfn is nested inside the function outerfn;

2. The function outerfn returns the function innerfn. This characteristic is explained in below example

When you create any variable with local or functional scope, you must use the var keyword to define the variable otherwise variable will act as a global variable. if already exists in the global scope.

How to use Closure in JavaScript?

Let’s understand the Closures in JavaScript with an exampleInstead of calling the function innerfn() inside the body of the function outerfn(), I am going to returning function innerfn() from function outerfn().

In this code, the implementation of var outerfnobj = outerfn() is the actual pointer to the function innerfn. This code explains how a closure works in JavaScript. When the function inside the function so the outer function of a variable, can create a closure from outside reference.

You can see in the above code, outerfn() function returns the another function innerfn() and innerfn() does not have any local own variable. This example also shows the lexical scope of the variable and due to that function innerfn() is able to access the variable i from the outerfn function. Next, once outerfn() function called, it will be assigned to the variable outerfnobj and outerfnobj works as function and log the output value. This is the best showcase of closure and it works best in complex level of coding.

Please share your experience via the comment box below. It would be great to see you to share your experience with JavaScript Closure. Don’t forget to share this article with your friends.

Share:
Share on Facebook2

Share on LinkedIn0Tweet about this on TwitterShare on Google+0Buffer this pageDigg thisShare on Reddit1

Leave a Reply

Your email address will not be published. Required fields are marked *

Most Popular Posts

How to use IndexedDB in HTML5

Posted on 2 years ago

Bhumi

Static Methods and Properties in PHP

Posted on 5 years ago

Bhumi

How to use WordPress Heartbeat API?

Posted on 2 years ago

Bhumi

MySQL coalesce() function

Updated 17 years ago

Bhumi

How to use JavaScript Promise API?

Updated 17 years ago

Bhumi

What are Lambdas and Closures in PHP?

Updated 17 years ago

Bhumi

An Introduction to Gulp JS

Updated 2 months ago

Bhumi

The Reader’s Poll – June 2015

Posted on 2 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 3 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 3 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 4 years ago

Bhumi