JavaScript Closures

JavaScript variables can belong to the local or global scope. Global variables can be made local (private) with closures.

Global Variables

A function can access all variables defined inside the function, like this:

But a function can also access variables defined outside the function, like this:

In the last example, a is a global variable. In a web page, global variables belong to the window object. Global variables can be used (and changed) by all scripts in the page (and in the window).

In the first example, a is a local variable. A local variable can only be used inside the function where it is defined. It is hidden from other functions and other scripting code.

Global and local variables with the same name are different variables. Modifying one, does not modify the other.

Variables created without a declaration keyword (var, let, or const) are always global, even if they are created inside a function.

Variable Lifetime

Global variables live until the page is discarded, like when you navigate to another page or close the window.

Local variables have short lives. They are created when the function is invoked, and deleted when the function is finished.

JavaScript Nested Functions

All functions have access to the global scope. In fact, in JavaScript, all functions have access to the scope “above” them. JavaScript supports nested functions. Nested functions have access to the scope “above” them.

What is a “closure” in JavaScript?

A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain. The closure has access to variables in three scopes; specifically: (1) variable in its own scope, (2) variables in the enclosing function’s scope, and (3) global variables.

the above example, variables from innerFunc, outerFunc, and the global namespace are all in scope in the innerFunc. The above code will therefore produce the following output:

outerArg = 123; innerArg = 456; outerVar = a; innerVar = b; globalVar = xyz

Surprising the output of the following code will not display the values 0, 1, 2, 3, and 4 as might be expected; rather, it will display 5, 5, 5, 5, and 5.

The reason for this is that each function executed within the loop will be executed after the entire loop has completed and all will therefore reference the last value stored in i, which was 5.

Closures can be used to prevent this problem by creating a unique scope for each iteration, storing each unique value of the variable within its scope, as follows:

Conclusion

A closure is a function having access to the parent scope, even after the parent function has closed.

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Serialize Persistent Object and Reverse

What Is JavaScript? What Can We Develop With It?

What Is JavaScript? What Can We Develop With It?

Function-like procedural macros

1. Array: array is a collection of variables. Array very basic fundamental thing in JavaScript.

Create a Coronavirus Tracker in just 3 hours using React, Amcharts 📈 & Firebase.

Debugging a Problem with an OnClick Event in React.js

How to Use Context API and JWT to Maintain User Sessions.

Sup With Those Damn Semicolons in JS?

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
Sekou Dosso

Sekou Dosso

More from Medium

Loops in JavaScript

Understanding JavaScript's ‘this’ keyword

Get Started with JavaScript Promises (in Under 2 Minutes)

JavaScript Objects