JS — Say Hello To Closures


Hello! I’m Samee. My background is from Computer Science and I love technology. I compose various type of videos including tech/programming instructional exercises (on YouTube) and review software/hardware/products and cover tech events (well, sometimes). On the off chance that you have any inquiries concerning the article, leave a remark and I’ll hit you up, or discover me on twitter SameeHsn.

The Closure is an accumulation of all variables in extension at the season of function creation. To utilize this, make a function inside another function which is called as Nested Function. The inward function will approach the factors in the external function scope (Closure gets to the external function scope), even after the external function has returned. Closures are made each time a function is made.

Prior to proceeding onward to comprehend about Closures, allows first get the 10,000 foot view about Scope Chain in JavaScript.

Regularly, there are 2 sorts of extension:

Global Scope

Local Scope

In JavaScript, a variable inside a function isn’t unmistakable outside. Be that as it may, factors inside a square (conditions like if or while) are obvious outside as well.

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

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.

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.

By Parathan Thiyagalingam

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:

  • 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

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, protectedlike 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:

Quick Example:

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.

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.

Thumbs up to Parathan Thiyagalingam and FreeCodeCamp for helping material.

Follow me on Twitter: SameeHsn

Stay tuned.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store