Closures in JavaScript: A Basic Guide

We present to your attention the translation of the article Parathan Thiyagalingam, published on the website medium.freecodecamp.org. Want to know how closures work in JavaScript? Look under the cat!


Photo of Austin Distel with Unsplash

A closure is a combination of all variables in scope at the time the function is created. To use a closure, you need to create an nested function, that is, a function inside the function. An internal function will have access to the variables in the scope of the external function even after the external function has completed its work. (It is the closure that provides this access.) Each time a function is created, a closure is also created.
')
Before we begin to deal with the concept of closures, let's look at what chains of scope are in JavaScript.

As a rule, there are two types of scopes: global and local.

In JavaScript, a variable inside a function is not accessible from the outside - unlike, for example, from variables inside a block (in conditions like if and while ).

Based on this, a function in JavaScript has a scope, and a block does not.

 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, and b is local, that is, used only by the app function. Outside the local scope, we do not have access to a local variable.

How to use 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); 

In the example above, app is the parent function, add is the child function.

• To display all properties of the selected object, console.log is used instead of console.log .
• The variable x is assigned to the app function, which then returns the add function. This allows you to see all the properties of the add function object.

If you open the console in a browser, you will find a Closure object inside the Scopes data array.



Since the internal function add has access to the variables b and d that belong to the external function, these two variables will be added to the Closure object as a reference.
Consider another closure example.

 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 

• The global startFunc function startFunc assigned the function add , which is a child of the parent app function.
• This is only possible after calling the app function. Otherwise, the startFunc function will behave as a global variable without an assigned value.

How to use closures in javascript

Many of us, using closures when writing code, do not fully understand why they do this. In JavaScript, there are no public , protected and private modifiers that are in object-oriented programming languages. Therefore, to close access to the namespace for external code, we are forced to resort to using functions.

And since we are talking about functions, the immediately called function (IIFE) starts immediately after the declaration. It does not even need to call.

The IIFE syntax is:

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

Consider this 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 and prefix are two private variables that cannot be changed. Access to them is open only for the inner function (in our case, this is the innerFunc function).

• The first time the studentEnrollment function is called, the studentEnrollment function increases the value of the count variable to 1.
• The second time, the count value increases from 1 to 2.
• All this is possible only through closure.

Conclusion

A closure is a set of external function variables, thanks to which the scope of the internal function gains access to these variables. This protects the global namespace.

The closure functionality allows developers to write clean code — such as in object-oriented programming languages ​​— code that does not confuse global and local variables.

---

Enjoy coding!