JavaScript Internals - Part I (Execution Context)

Introduction

In this series, we will be looking at some of the tricky topics and take a deep dive into the core fundamentals of the JavaScript language.

What happens when we execute JavaScript code ?

Whenever we execute any JavaScript code, the JavaScript engine behind the scenes creates what is known as an execution context.

Execution Context

Assume we have a big vertical carton box in-front of us.

An execution context can be thought of like this. It is a big box inside which the JavaScript Engine executes all of our JavaScript code.

It is also known as the Global Execution Context (GEC).

Note:

Whenever a function is invoked the JS engine creates a brand new execution context (more on this in the upcoming posts).

This new execution context resides within the execution context which was created when the JS program was first executed.

Hence the execution context which is created first is known as the global execution context (since all other execution contexts created will reside within this).

What does the execution context contain ?

The execution context is divided into two major components namely,

• The Memory Component (or) Variable Environment

• The Code Component (or) Thread of Execution

JS Program Execution with an Example

Let us now see how the execution context along with its two major components comes into play with a simple example.

We have a very simple JavaScript program where there is a variable a initialised with the value 10 and we have a function named greetUser which logs "Hello World" to the console.

When this program is executed by the JavaScript engine, first a global execution context is created.

In any execution context there are two steps which are followed:

• Memory creation phase

• Code execution phase

Memory creation phase

During the memory creation phase the JavaScript engine allocates memory to all the variables in the program and gives them a spatial or temporary value of undefined.

Whenever JavaScript engine sees any functions in the program during this phase the entire code inside the function is stored as such.

Both the variables and functions are stored as key-value pairs.

Taking our example the memory component of our execution context looks like below:

Now the JavaScript engine sees that it has no more code to scan through to allocate memory and thus it proceeds to the code execution phase.

Note : In the memory creation phase only the memory is allocated to the variables and functions are allocated and none of the code is executed. Hence line number 7 in the example will not be executed yet.

Code execution phase

In this phase, the JavaScript engine starts to execute our code line by line. Let us trace this through our example :

• Line 1 is encountered and the JS engine updates the value of the variable a from undefined to 10.

• Lines 2 to 6 have nothing to be executed and hence JS engine proceeds to the next line.

Current state of the execution context

• Line 7 involves function invocation. Whenever a function invocation happens a new execution context is created.

• JS engine creates a new execution context inside the current execution context. It goes through the memory creation phase for this execution context as well.

• It sees that there are no variables or functions within our greetUser function and hence it proceeds to the code execution phase.

• In the code execution phase, it logs "Hello world" to the console.

Final Steps

Now the JS engine sees that there is no more code to be executed for the function greetUser and hence it clears the execution context allocated for it.

Now it resumes back to the global execution context and sees that there is no more code to be executed here also and hence clears the global execution context as well.

Now the program execution is complete.

Conclusion and Upcoming Post

• In this post we saw how JavaScript engine executes our program internally.

• In the next post we will see more such examples and I will explain the line by line execution of these examples.

• Huge thanks to Akshay Saini (An engineer at Uber) for inspiring me to write this post. This series of posts his based on his playlist Namaste JavaScript in his youtube channel. Do check it out.

• Until the next post, cheers and keep coding :)