Javascript Closures

Javascript Closures
We have a great and most frequently used function in a javascript programming language
named closures. By using the closures an inner function can access the variables and parameters of
its outer function inside its body. This opens up a huge amount of possibilities and benefits where
this can be used. To understand closures it is required to know the scope of the variables in
javascript. Javascript closures only come into picture when there is the nesting of functions.
A closure function has access to three scope chains namely, its scope, outer function’s scope,
and global variables scope. This means that a closure function can access its variables and
arguments defined in its closed curly braces {...}, the outer function’s variables and arguments as
well as the global variables which are declared.
Let us see how this can be implemented with the help of an example.
<!DOCTYPE html>
<html>
<body>
<p>Demonstration of Javascript Closure</p>
<button type="button" onclick="testClosure()">Check Your Message</button>
<p id="sampleDemoOfClosure"></p>
<script>
function displayMessage (param1, param2) {
var outerVariable = "Hi, ";
function prepareGreetings () {
return outerVariable + param1 + " " + param2;
}
return prepareGreetings ();

}
function testClosure() {
var message = displayMessage ("Good", "Morning");
document.getElementById("sampleDemoOfClosure").innerHTML = message;
}
</script>
</body>
</html>
The output of above code is as follows after clicking “Check Your Message” button -
In the above code, prepareGreetings method can access the variable namely outerVariable of
method displayMessage and parameters to displayMessage function namely param1 and param2 in
its scope. Here, displayMessage is the outer method and prepareGreetings is the inner method.
Global Variables with closures-
Global variables can be defined outside all the functions using var, let or const, however, any
variable which is not defined using var, let or const is global in javascript which can be present
inside or outside the function and is accessible throughout the window scope. Unlike the local
variables which have a lifespan of there function or block execution, the global variables have a
lifespan until the page is discarded or the window is closed or we navigate to some other page. Let
us check this out with the help of an example. Here we will modify the above program and add a
global string and access it in the inner function.
<!DOCTYPE html>
<html>
<body>
<p>Demonstration of global variable in Javascript Closure</p>
<button type="button" onclick="testClosure()">Check Your Message</button>
<script>
var greeting="Have a great day ahead!";
function displayMessage (param1, param2) {
var outerVariable = "Hi, ";
function prepareGreetings () {
return outerVariable + param1 + " " + param2+". "+greeting;
}
return prepareGreetings ();

}
var message = displayMessage ("Good", "Morning");
}
</script>
</body>
</html>
The output of above code after clicking the buttonis as follows -

Closure execution after the return of outer function-
Closures or inner functions in javascript have access to its outer functions scope chain even
after the outer function is returned. Let us have a look at it with the help of an example.
<!DOCTYPE html>
<html>
<body>
<p>Demonstration of Javascript Closure after outer function is returned</p>
<button type="button" onclick="testClosure()">Get Today's Quote</button>
<script>
function getQuote (storiesStatement) {
var politicsStatement = "Politics always change.";
function prepareQuote (realityStatement) {

return politicsStatement + storiesStatement + " " + realityStatement;
}
return prepareQuote;
}
var todaysQuote = getQuote (" Stories");
var message = todaysQuote (" never do.");

}
</script>
</body>
</html>
The output of above code after clicking “Get Today's Quote” button is -
As can be seen, getQuote function is the outer function which returns when the value (the
inner function) is collected in todaysQuote variable. After that, the closure method i.e inner method
prepareQuote is called using the collected variable todaysQuote which returns the quote which
contains outer function’s parameters and variables.
Private variables using javascript closures -
Closures do not store the values of outer variables instead, it stores their references. Hence,
outer variables can be changed even before the closure is called. This helps us to use the private
variables in javascript. We will see an example demonstrating the usage of private variables with
the help of closures.
<!DOCTYPE html>
<html>
<body>
<p>Demonstration of using private variables with the help of javascript closures</p>
<button type="button" onclick="testClosure()">Get Employee Id</button>
<script>
function employeeId () {
var employeeId = 1001;
return {
getEmployeeID: function () {
alert("Employee Id is "+employeeId+".");
},
setEmployeeID: function (currentId) {
employeeId = currentId;
}
}
}
var employeeNo1 = employeeId ();

employeeNo1.getEmployeeID();
employeeNo1.setEmployeeID(1500);
employeeNo1.getEmployeeID();
</script>
</body>
</html>
The output of above code after clicking “Get Employee Id” button gives two alerts as shown-
The inner functions namely getEmployeeID() and setEmployeeID() help to retrieve and
assign the current value to the employee id field. Firstly the employeeId is initialized with 1001
value and hence the first alert while retrieving value gives the message “Employee Id is
1001”.When inner method closure setEmployeeId is called with value 1500, the employeeId
variable of outer function scope is changed and hence the second alert returns “Employee Id is
1500” message.
Closures can sometimes lead to bugs -
As closures have access to the updated values of the outer function of the position where it is
declared, it can lead to unexpected behavior especially while using for loops. These bugs occur
because closures have access to the references of variables instead of their values. However, we can
avoid such bug occurrences by using Immediately Invoked Function Expression (IIFE). Using
immediately invoked function expressions to pass only the value of the variables or parameter
instead of its references which solves the problem when using loops with closures.
Conclusion -
In this way, we can use javascript closures to achieve data hiding, abstraction and private
variables which leads to encapsulation. Javascript Closures provide us with a great advantage of
outer function variable accessibility and hence can be used extensively. However, you need to be
careful while using them with loops such as for loops to avoid referential access and enable value
access by using Immediately Invoked Function Expression along with closures.

Javascript Closures

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript Closures

Uploaded by

Copyright:

Available Formats

Javascript Closures

<p>Demonstration of Javascript Closure</p>

<button type="button" onclick="testClosure()">Check Your Message</button>

return prepareGreetings ();

Global Variables with closures-

<p>Demonstration of global variable in Javascript Closure</p>

<button type="button" onclick="testClosure()">Check Your Message</button>

return prepareGreetings ();

The output of above code after clicking the buttonis as follows -

<p>Demonstration of Javascript Closure after outer function is returned</p>

<button type="button" onclick="testClosure()">Get Today's Quote</button>

function prepareQuote (realityStatement) {

var todaysQuote = getQuote (" Stories");

var message = todaysQuote (" never do.");

Private variables using javascript closures -

<p>Demonstration of using private variables with the help of javascript closures</p>

<button type="button" onclick="testClosure()">Get Employee Id</button>

var employeeNo1 = employeeId ();

Closures can sometimes lead to bugs -

You might also like