Understanding JavaScript Closures

Understanding JavaScript Closures

The Closure is a collection of all variables in scope at the time of function creation. To use closure, create a function inside another function which is called aa Nested Function.

The Closure is a collection of all variables in scope at the time of function creation. To use closure, create a function inside another function which is called aa Nested Function.

The inner function will have access to the variables in the outer function scope (Closure helps to access the outer function scope), even after the outer function has returned. Closures are created every time a function is created.

Before moving on to understand about Closures, let’s first get the big picture about Scope Chain in JavaScript.

Normally, there are 2 types of scope:

  • Global Scope
  • Local Scope

In JavaScript, a variable inside a function is not visible outside. But variables inside a block (conditions like if or while) are visible outside too.

From this, JavaScript has function scope. There is no block scope.

var a = 10;
function app(){
   var b = 2;
   console.log(a); // 10
   console.log(b); // 2
}
console.log(b); //   ReferenceError: b is not defined
app();

As we already know, a is a Global variable & b is a local variable which is *specific *to the app function.

We can’t get the value of a local variable out of the local scope.

Using a Nested Function — Function inside a Function

var a = 10;
function app(){
     var b = 2;
     var d = 3;
  function add(){
     var c = a + b;
   }
 return add;
}
var x = app();
console.dir(x);

Here, the app is the parent function & add function is the child function.

  • Rather than using console.log, console.dir is used to console all the properties of a specified JavaScript object which helps developers get the properties of that object
  • Variable x is assigned to app function & the app function returns the add function. Therefore we could see all the object properties of the add function.

If you see the console in the browser, you could see the Closure object inside the Scopes array.

Since the inner** function add** accesses the outer function variables b & d, those 2 variables will be added to the Closure object for the reference.

Let’s have look at the next example for Closure:

var a = 10;
var startFunc;
function app(){
      var b = 2;
   function add(){
      var c = a + b;
      console.log(c);
   }
   startFunc = add();
}
app(); // Invoke the app function
startFunc; 
// as the app function invoked above will assign the add function to startFunc & console the value of c
  • a Global function called startFunc is assigned to the add function which is a child function of the parent app function.
  • This is possible only after the app function is invoked, otherwise startFunc will act as a global variable without any value assigned

    Application of Closures in JavaScript

Most of us use Closures while coding but we don’t get why we are using it. JavaScript doesn’t have the access modifiers like private, public, protected like other Object Oriented Programming Languages. So, we could use functions to protect the namespace from the outside code usage.

Especially in functions, *Immediately-invoked Function Expression (IIFE) *is the one which is executed immediately after the declaration. You don’t need to invoke the function after the function is declared.

Syntax definition of IIFE is:

(function(){
             //variables & scope that inside the function 
})();

Let’s have an example:

var studnetEnrollment = (function () {
    //private variables which no one can change
    //except the function declared below.
     var count = 0;
     var prefix = "S";
    // returning a named function expression
     function innerFunc() {
         count = count + 1;
         return prefix + count;
     };
 return innerFunc;
})();
var x = studnetEnrollment(); // S1
console.log(x);
var y = studnetEnrollment(); // S2 
console.log(y);

count & prefix are the 2 private variables which can’t be changed by anyone & can only be accessible to the inner function (here its innerFunc). This access is possible only by the feature called Closure.

  • At the first time, when the studentEnrollment function is called, the count variable inside the function is incremented 1 by innerFunc function.
  • At the second time, the count is incremented the previous value of count which is 1 to 2
  • These are possible by the Closure feature.

    Conclusion

The Closure is a collection of variables in an outer function which gives access to the inner function scope to protect the global namespace.

Closures enable developers to write clean code like OOP Languages which doesn’t confuse the global & local variable names.

javascript es6 web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.

Best Web and App Development Company in Ahmedabad

Contact DataPierce for any questions or queries you have about website development, designing, marketing projects or any small or enterprise software development.

Top 15 Free JavaScript Frameworks for Web Applications

List of some useful JavaScript Frameworks and libraries for website, web apps, and mobile apps development, that developers should know about to make selection easier.

Mobile App Development Company | Web Development & Design Services

WebClues Infotech is a leading website and mobile development services company. We specialize in full stack development services as well as iOS and Andriod app creation.