Back to Top

What is Closure in JavaScript?


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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How you can write Custom Queries in Modx

Posted on 6 years ago


How to check user is logged in Modx

Posted on 6 years ago


Two years blogiversary

Posted on 5 years ago


To learn MySQL PACK_KEYS with example

Posted on 4 years ago