JavaScript Execution Context, Execution Stack and Hoisting

JavaScript Execution Context, Execution Stack and Hoisting

Welcome everyone once again. As promised we bring the second part of under the scene processes in JavaScript language. In this lesson, we gonna learn more about JavaScript Execution Stack, Execution Context, Hoisting, Creation, and Execution phases. As I mentioned this is the second part of this topic so I highly encourage you to read the first part (link provided below) of the topic for better understanding.

“All About JavaScript Global Execution Context And Global Object”

In the above-linked lesson, we explain what is Execution context, Global and Lexical environments, global execution context, global object, window & this keyword. Read this lesson till the end if you really wish to understand the core concept of JavaScript. Also, you will get one JavaScript Challenge in the end.

First talk about the Javascript Challenge#5, which I asked you in the last lesson link provided above.

Solution for JavaScript Challenge#4 as below,

var numbers = [2, 5, 97, 58, 48, 36, 45, 79, 63, 59, 5, 22, 60];

var numbersAsc = numbers.sort((a, b) => a - b);

console.log(numbersAsc);

//[2,  5,  5, 22, 36, 45,48, 58, 59, 60, 63, 79,97]

What is Creating Phase and Hoisting?

If you read my last lesson you are already aware of what is execution context and how JavaScript engine uses it to wrap our codes.  Now we will see how the execution context created and how it works behind the scenes.

Example One:

var a = 'Hello, John';
function b(){
console.log('Hello, Mary');
}
b();
console.log(a)

What output we are expecting? Most of you already guess the correct answer: First, we see Hello, Mary and second, we see Hello, John. 

Now, change our above example a little bit and see what happens. Example Two:

b();
console.log(a);
function b(){
console.log('Hello, Mary');
}

what will be the result? I am sure it is not difficult at all to guess the answer. Yes! we got an error saying

ReferenceError: a is not defined

Let’s see another example. Example Three:

b();
console.log(a);
var a = 'Hello, John';
function b(){
console.log('Hello, Mary');
}

we call the function b and console.log(a) command before actually declaring it “b” and “a”. So, what you think will happen now?

we will get our output as “Hello, Mary” and “undefined”. Don’t you think it’s pretty strange that when this line of code executed we didn’t even declare the variable “a”, still instead of throwing an error it is showing undefined?

Let’s see what happened behind the scene.

Hoisting

Whenever we run our code, the JavaScript engine creates a Global execution context and the first job of this execution context is to go through all the codes and declare all the variables and functions attached to it. This is called the Creation Phase. This way JavaScript engine allocates a separate memory for each variable but they do not assign any value to it and kept it as undefined. Functions are declared as the whole bunch of code as it is just a pointer to the memory location and not called until we call it.

This process of assigning memory location of all the variables and functions before actually run the codes synchronously or line by line is called Hoisting.

So, in example three, variables a and function b already declared and kept aside for future use. And when first function b called it reverted “Hello, Mary” and then console.log(a) run which returned “undefined” which was declared at the time creation.

To be more sure let’s see one more example. Example Four:

b();
console.log(a);
var a = 'Hello, John';
console.log(a);
function b() {
  console.log('Hello, Mary');
}

In the above example, we got the result as

• Hello, Mary      (this is the result of the execution of function b in the first line)
• undefined        (this is the result of the execution of console.log(a) in the second line, this is due to hoisting)
• Hello, John     (this is the result of the execution of console.log(a) in the fourth line as now “a” already defined by the programmer)

What is the Execution Phase and Execution Context?

After the Creation of the global execution context and memory allocation process for variables and function finished, the JavaScript engine starts to execute our code line by line or synchronously.

What is Single Threaded?

In JavaScript, commands or codes are executed line by line and one line at a time. Because of this behavior it is called that JavaScript is a Synchronous and Single-Threaded Language. Although with some tricks Javascript also works asynchronously, for example, when we make any request from the server or in case of ajax requests, etc. We will learn about JavaScript asynchronous behavior later.

As I mentioned in the last lesson whenever a function invocation happened it creates its own Execution Context. And the Execution context destroys itself automatically after finishing both the creation and execution phase. So each execution context keeps place itself one on top of another. This is called the JavaScript Execution Stack.

In the above example,

Step 1:

The global execution context created and creation phase performed for function a, function b and variable d declared.

Step 2:

The global execution context went into the execution phase and start running the code line by line. In the 10th line, Function a() called which creates another execution context for function “a”. As I told you earlier every function invocation creates an execution context for itself.

step 3:

This execution context first set memory location for variable “c” in its creation phase and invokes function b() in the execution phase. It creates another execution context for function b().

step 4:

This execution context also goes through the creation and execution phase. As there is no other function to invoke inside function b(). This execution context removed from the execution stack after executing code line var c = “Mark”.

step 5:

After function b() execution stack removed, execution inside the function a() execution context again start and run line var c= “Mary”. After this line, this execution context also removed from the execution stack as there is no other function to invoke inside the function a().

step 6:

Now the execution stack only left with a global execution context that runs its remaining line of codes.

What happens if Someone Click the button between these executions?

If someone clicks any button or any other event which is related to a user interface or DOM will go into a separate stack which is called the event queue and wait for their turn when execution stack will be empty. It means all the events will be executed when other functions will finish their execution.

After the function execution context removed from the execution Stack, Click event jumped to the execution stack.

IF YOU LIKE THE LESSON SHARE IT

These are some basic behind the scene knowledge about how the JavaScript engine executes the codes and what happens when we run the code. 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!♥