Introduction

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.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. </head>
  6. <body>
  7. <form id="form1" runat="server">
  8. <script>
  9. var fun1 = function (value) {
  10. return function () {
  11. return value;
  12. };
  13. };
  14. var val = fun1(100);
  15. alert("Value is:- " + val());
  16. </script>
  17. </form>
  18. </body>
  19. </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/span> function. Then we are checking whether both values are the same. If the same then the message will be returned.
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
    2. <!DOCTYPE html>
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head runat="server">
    5. </head>
    6. <body>
    7. <form id="form1" runat="server">
    8. <script>
    9. var fun1 = function (value1) {
    10. return function (value2) {
    11. if (value1 == value2)
    12. return "Both are same";
    13. };
    14. };
    15. var val = fun1(100);
    16. alert(val(100));
    17. </script>
    18. </form>
    19. </body>
    20. </html>
      Here is a sample output. At run time we are supplying the same value to the inner-most and the outer-most functions.
      function in JavaScript
      1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
      2. <!DOCTYPE html>
      3. <html xmlns="http://www.w3.org/1999/xhtml">
      4. <head runat="server">
      5. </head>
      6. <body>
      7. <form id="form1" runat="server">
      8. <script>
      9. function fun1() {
      10. name = "Sourav Kayal";
      11. return function () {
      12. return name;
      13. };
      14. };
      15. var value = fun1();
      16. alert(value());
      17. </script>
      18. </form>
      19. </body>
      20. </html>

      Implement closure in a normal named function

      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.
        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. I hope you have understood the concept. Enjoy JavaScript.