JavaScript Variable Scope Chain and Variable Environment – The Core Concepts

JavaScript Variable Scope Chain and Variable Environment – The Core Concepts

Welcome everyone once again. As promised we bring lessons on JavaScript Variable Scope chain and Variable Environment. This lesson is in continuation of my last two lessons. In the last two lessons, we learned about environments, execution context, execution stack, creation and execution phase, hoisting and so many other things. These are just the building blocks for mastering JavaScript basics and under the hood concepts. As the last two lessons are very important for this lesson, you can read them also following below provided links.

Part 1: JavaScript Global Execution Context – Behind the Scene

Part 2: JavaScript Execution Context, Execution Stack and Hoisting

Let’s start. I highly encourage you to read until the end as this concept is very important for your foundation for your JavaScript learning process.

What is the Variable Environment?

It simply tells what is the location of the variable, which execution context it is related to, and how it is connected to other functions living in the same or different environment or execution context. In part 1 of this series, link provided above we discussed environments like lexical and global environments. Now, we discuss this in more detail in context to the variable accessibility in different environments.

Scope

Scope tells us where we can access a particular variable. It all defined in the creation phase of the execution context. It all occurs every time a new function invokes.

• Each Function creates a different Scope (as same as every function creates its own execution context)
• It depends on the variable lexical environment or where the variable physically present

Take our example first,

function b() {
    var anyVar = 55;
}
function a() {
    var anyVar = 100;
    b();
}
var anyVar = 9;
a();

As we learned in the last lesson, whenever our code executes, the JavaScript engine creates an execution stack and places a global execution context first and keeps creating a new execution context and placing them one by one as any new function invokes.

Let’s see what happened in the case of our example

We can see in the image that

1. The global execution context, variable anyVar has value 99.
2. Function a() execution context, variable anyVar has value 100.
3. Function b() execution context, variable anyVar has value 55.

so, it clearly visible that even their name is the same ( anyVar) every variable has its own environment which is decided by the execution context in which it is lexically present. And this environment decides its accessibility scopes also.

function b() {
  var anyVar = 55;
  console.log(anyVar);
}
function a() {
  var anyVar = 100;
  console.log(anyVar);
  b();
}

var anyVar = 9;
a();
console.log(anyVar);

What will be the output of the above codes?

100 (from function a() execution context)

55 (from function b() execution context)

9 (from global execution context)

But what will happen if the variable is not placed in the same execution context in which it is used or called?

Scope Chain

function b() {
  console.log(anyVar);
}
function a() {
  var anyVar = 100;
  b();
  console.log(anyVar);
  
}
var anyVar = 9;
a();
console.log(anyVar);

In the above example, “anyVar” is not defined inside the function b() environment, so it can not be placed inside its execution context. So, what will be the output?

Here the scope chaining will come into the picture. The accessibility of the variable is decided by the scope chain. Let’s see above example step by step:

Step 1: Global execution context created and set “anyVar” variable equal to 99. After that call function a.

Step2: Function a() execution context created on top of the global execution context and set “anyVar” variable equal to 100 and call function b.

Step 3: Function b() execution context created on top of the function a() execution context and run line console.log(anyVar).

Step 4: Because console.log is also a function, the JavaScript engine will create an execution context for this function also.

Now, JavaScript engine tries to search “anyVar” value in its parent execution context which is function b() execution context. As “anyVar” not defined inside function b(), it will go further out to search the variable value into function b() parent.

Function Parent

Global execution context is the place where function b(), and a() defined. Therefore, the Global execution context is the parent of both functions. It doesn’t depend on where the function gets called like function b was called inside the function a.

So, the JavaScript engine finds the value of “anyVar” in the global execution context which is 99 and gives the output of 99.

Step 5: Both console log and function b execution context popped up from execution stack and console log in function a will create its own execution context and found the value of “anyVar” in its parent execution context which is function a() execution context. Here it finds the value of “anyVar” is 100 so give output 100.

Step 6: Both console log and function a() execution context popped up from execution stack and console log in global execution context will create its own execution context and found the value of “anyVar” in its parent execution context which is global execution context. Here it finds the value of “anyVar” is 99 so give output 99.

So, this is the whole process in running our code given above.

One more thing to notice from the above example is variable scope chain direction is from inside to outside which is opposite to the direction of Execution context creation. First javaScript engine search withing itself then go outside to search the value of the variable if not found go more out till the last point which is a global execution context.

Execution Context Creation (Inward Direction)

Variable Scope Chain (Outward Direction)

This process of finding the value of a variable in the parent down the line until the end of the scope is called Variable Scope Chaining.

IF YOU LIKE THE LESSON SHARE IT

These are some core concepts about the variable environment and JavaScript scope chain. If you have any questions regarding this topic or any other JavaScript topics please mention in the comment, so that I can promptly reply to you. And if you have not read our previous lessons on JavaScript, just click the link below and read it.

JavaScript Tutorial lessons

you can also visit MDN website for more details.

Next Lesson

In our next lesson, we will tell you about the variable environment, variable scope chaining, and much more related to the JavaScript. We will come again with some more knowledge very soon. Sign up with us so that you will not miss any of the future articles in the sequence of JavaScript tutorials. You can also follow us on our twitter or Facebook pages for all the future Lessons.

If you’re interested, Check out some other articles related to present crisis Coronavirus

Take care of yourself and your family!♥