The Best Guide on How to Implement JavaScript Closures

What Is Variable Scope?

The location of the variable declaration generally defines the scope of a variable. It defines the part of the program where a particular variable can be accessed. JavaScript supports two types of variable scopes - 

1. Global Scope/Variables
2. Local Scope/Variables

Global Variables 

A variable declared outside of a function is attributed to the global scope and is hence accessible from anywhere in your code. 

Local Variables

Local Variables or Function Variables are variables declared within a function. These variables are only accessible from that function and its nested functions. 

• Consider this code to understand the working of global and local variables:

<script>

            var a = 10

            function function_Name(){

                var b = 20; 

                document.write(“The sum is “ + (a+b) + '<br>')

            }   

            function_Name()

<script>

• The output of the above code is: 

Variable Scope 

• In the above example, the variable “a” is a global variable and can be accessed from anywhere in the code. In contrast, variable “b” is a local variable and can be accessed within the function “function_Name” and perhaps its nested functions. 
• The scope chain is a stack consisting of all the references to the variables for the function being executed. 

Now that you know what variable scope let’s understand what exactly is JavaScript Closure

What Is a Closure?

Closures in JavaScript is a feature where an inner function has access to the outer function’s variables. Closures are important as they define what is and what isn’t in the scope of functions. They also control the variables that are being shared with the nested functions. 

A closure –

1. Has access to the variables of its scope. 
2. Has access to the variables of the outer functions.
3. Has access to the global variables.

• Consider the following piece of code: 

<script>

            var a = 10

            function First_func()

            {

                var b = 20;

                function Second_func()

                {

                    var c = 20+a+b

                    return c

                }

                return Second_func();

            }

            var sum = First_func()

            document.write("The sum is " + sum)

        </script>

• The variable “a” is a global variable and can be accessed from anywhere within the program. The variable “b” is declared within the function “First_func” and the variable “c” is declared within the function “Second_func” which is a nested function. 
• Since a closure is a function that has access to the variable from another function’s scope,  function “Second_func” can access all the variables a,b and c. 
• The output of the code above is shown below: 

JavaScript Closures

• This was a simple introduction to Closures in JavaScript. We recommend you play around with variables and understand their behavior within different scopes. 

Master JavaScript fundamentals including, jQuery, Ajax, and more with the Javascript Certification Training Course. Check out the course preview!

Moving Foward

To learn more about JavaScript in its entirety, certification is highly recommended and could act as a catalyst for enriching your coding career. Simplilearn's JavaScript Certification Training course helps individuals master the JavaScript programming language in an all-inclusive training program that includes complete JavaScript fundamentals, jQuery, Ajax, and more. You will also have the opportunity to apply your skills by building a real-time chat application.

Do you have any questions regarding JavaScript Closures? Let us know in the comments section of this article. Our experts will get back to you as soon as possible!