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.
1 2 3 4 5 6 7 8 | var i = 10; // Global variable and will be accessible in all functions created in this script. function ShowGlobal() { //No local variable declared in this function so it will alert global variable alert(i); } ShowGlobal(); // affiche "10" |
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.
1 2 3 4 5 6 7 | function ShowLocal() { var j = 10; // This is a local variable, accessible only within this function } ShowLocal(); alert(j); // create an error "Uncaught ReferenceError: j is not defined" because variable j does not have a global scope so it is not not accessible here. |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 | function outerfn() { var i = 100; function innerfn() { i++; console.log("innerfn called: "+i); } console.log("outerfn before innerfn called: "+i); innerfn(); console.log("outerfn after innerfn called: "+i); } outerfn(); |
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().
1 2 3 4 5 6 7 8 9 10 11 | function outerfn() { var i = 100; function innerfn() { i++; console.log("innerfn called: "+i); } return innerfn; } var outerfnobj = outerfn(); outerfnobj(); |
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.
Comments (1)