This is the Advanced JavaScript article series; in this series we are learning various important concepts of the JavaScript language. We have already covered the following topics, you can visit them.
In this article we will cover one of the most interesting features of JavaScript called "closure". The feature might be a little confusing to developers but when we try to develop a JavaScript library, this feature might help us.
The fundamental idea behind "closure" is, the function will return another function rather than returning any other primitive or user-defined data type. So, try to understand it.
Understand Outer and inner function
So, when we are talking about a function that returns another function, that sounds like a nested function. The outer-most function that returns another function is called the outer function and the function that will be returned is called the inner function. Have a look at the following example.
Implement simple closure
In this example at first we are defining fun1() that is an anonymous function and the function returns another function.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var fun1 = function (value) {
return function () {
return value;
};
};
var val = fun1(100);
alert("Value is:- " + val());
</script>
</form>
</body>
</html>
We are calling the fun1() function that returns the inner-most function and then we are showing the return statement of the inner-most function.
Here is sample output
![JavaScript function]()
Pass value to both outer and inner function
If needed, we can pass a value to an inner function via an outer function. In the following example we are passing "value1" to the outer-most function and "value2" to the inner-most function. Then we are checking whether both values are the same. If the same then the message will be returned.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var fun1 = function (value1) {
return function (value2) {
if (value1 == value2)
return "Both are same";
};
};
var val = fun1(100);
alert(val(100));
</script>
</form>
</body>
</html>
Here is sample output. At run time we are supplying the same value to the inner-most and the outer-most functions.
![function in JavaScript]()
Implement closure in normal named function
In we have implemented the examples above using an anonymous function. But if we need to then we can use a normally named function. In this example we will see it.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function fun1() {
name = "Sourav Kayal";
return function () {
return name;
};
};
var value = fun1();
alert(value());
</script>
</form>
</body>
</html>
Here is sample output
![JavaScript]()
Conclusion
In this article we have learned the concept of closure. This is one of the interesting features of JavaScript. Hope you have understood the concept. Enjoy JavaScript.