JavaScript : Understanding the Scope-chain and Function closures

Starters

Welcome to another one of my Javascript tutorials. This time, it’s focused on Scopes and Closures. Spoiler Alert! To those of you who are prolific in their Javascript skills might want to speed up on the reading process, because this is a jargon free article with simple programs for one of the most important concepts in Javacript.

function b() { 
console.log(myVar);
}
function a() { 
var myVar = 2 ;
 b();
}
var myVar = 1;
a();

Now, I run the above code and go to my developer tools, the variable myVar is console logged at function b to give a numeric value of 1. Now we could clearly state two things here. The two instances of the variable myVar are at a global level and inside the scope of function a(). Now even though the execution loop goes through a() then b(), the function b() access the global variable value. So why didn’t the myVar variable turn up to be undefined, since clearly it wasn’t declared inside b(), or why didn’t it give the value of ?

closure2.png

Notice that the scope chain is progressively tending towards the global execution context. It is evident from the representation, that the function b() searches for the myVar variable within itself and since it isn’t defined there, it progresses across the scope chain and obtains myVar from the global execution context. In the process, it skips the function a() execution context as it’s not lexically below it. In short it’s not placed inside any function, hence it’s outer reference is the global.

Note : Lexical structure is just describing the actual location where the code was written

To further to understand what the I mean by the lexical environment, go through the below definition of b().

function a() { 
 function b() {
  console.log(myVar);
} 
var myVar = 2 ;
 b();
}
var myVar = 1;
a();

So now once b() checked for definition of myVar within itself, it progressed to the next execution context , a() where myVar has the value of 2.

closure3.png

Now we have learnt the little tit bits of scope in Javascript. This forms the basis for something crucial in Javascript called closures.

Closures Demystified

A closure is an inner function that has access to the outer 
(enclosing) function's variables—scope chain. The closure has 
three scope chains: it has access to its own scope
(variables defined between its curly brackets), it has access 
to the outer function's variables, and it has access to the global
variables.
         ~Javascriptissexy

Not sure what that meant? To understand what closures really mean, take a look at the simple example given below.

closure4.png

Okay now let me try to break the code into more understandable subparts. To begin with there are two simple Javascript functions (one inside the lexical environment of the other) Not sure what I am getting at ? Refer above for the scope and lexical environment reference again. The variable three is passed the value of 2 to function one(). That is the obvious part. The console.log() statement passes the value of 1 to the inner function by closure. That is the first part of the definitive statement given above.

A closure is an inner function that has access to the outer 
(enclosing) function's variables—scope chain.

A more definitive explanation of closures would be to say that they are “Functions with preserved data” . On first instantiation of function three() holds/preserves/(closure) of the data passed to it. When the execution control passes through the console.log() statement it provides for the inner function’s parameter, while the stored/preserved data is given to the outer function. Now this is a very simple “Jargon free” definition of the concept of scopes and closures. To be more on point do lookup on the official documentation/ articles. Thank you for bearing with me, as always do ping me or leave a comment below. Ciao!

Advertisements

One thought on “JavaScript : Understanding the Scope-chain and Function closures

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s