Introduction

In the fast-paced world of web development, understanding how JavaScript code is executed is crucial. This article will take you on a journey behind the scenes, unravelling the mysteries of the JavaScript code execution process. By the end, you'll have a clearer picture of how your code comes to life and the factors influencing its behaviour. So, what does this blog talk about? Javascript Execution context helps Javascript decide the order in which the code must be executed. We will explore, how it works and understand the Variable Environment, Thread of Execution and Call Stack. Let's Explore.

What is Javascript Execution Context?

Let's understand this from the word itself!

Execution = To execute the code,

Context = The Environment.

Note: Everything in JavaScript happens inside an Execution Context.

So what is Javascript Execution Context?

In simple words, the execution context can be considered as an environment or a container inside which our JavaScript code is executed.

This execution context has two components :

1. Memory Component also called Variable Environment :
   In this component, all the variables and functions in our code are stored as key-value pairs.

2. Code Component also called Thread of Execution:
   This is a place where our code is parsed and executed one line at a time and in a specific order. (Javascript is a synchronous single-threaded language.

Understanding how Javascript executes our code

Let's take a simple piece of Javascript code to understand.

var n = 5;

function square(n) {
  var ans = n * n;
  return ans;
}

var square1 = square(n);
var square2 = square(8);  

console.log(square1)
console.log(square2)

One important thing to note from the above piece of code is, I have used semicolon (;) in only last line and nowhere else but still javascript won' t throw any error. This is because, javascript is a forgiving language - the engine on its own will place semicolon (;) in missing place.

As soon as the JavaScript starts the execution of our code it creates the Global Execution Context(GEC) for global code i.e. all the code that is not present inside any function. And also it pushes the Global Execution Context in the Call Stack.

Now what is Call Stack ?

Call Stack is nothing but a stack data structure that is used by JavaScript for managing the execution contexts and also the control of code execution.

The creation of Execution Context occurs in two phases :

• First phase is called the Creation Phase of the execution context :-
  In the creation phase of the execution context memory is allocated to all the variables and functions that are present in our code.
  The default value while allocating memory to variables is undefined and for functions is actually that whole function itself.

So after the creation phase the global execution context will look like this:

• Second phase is called the Execution Phase of the execution context:-
  In the execution phase of the execution context our JavaScript code is executed line by line and at this time values of all the variables are set to their actual values.

  Now, in this phase, it starts going through the entire code line by line from top to bottom. As soon as it encounters n = 5, it assigns the value 5 to 'n' in memory. Until now, the value of 'n' was undefined by default.

  Then we get to the 'square' function. As the function has been allocated in memory, it directly jumps into the line var square1 = square(n);. square() will be invoked and JavaScript once again will create a new function execution context.

  

  Once the calculation is done, it assigns the value of square in the 'ans' variable that was undefined before. The function will return the value, and the function execution context will be destroyed.

  The returned value from square() will be assigned on square1. This happens for square2 also. Once the entire code execution is done completely, the global context will look like this and it will be destroyed also.

Key Points

• Every code in JavaScript executes in some execution context.

• Execution Context has two components :
  Variable Environment :- Where all the variables and functions that are present in our code is stored as key value pairs.
  Thread Of Execution :- This is a place where code is parsed and executed one line at a time and also in specific order.

• Creation of Execution Context has two phases :
  Creation Phase : Memory is allocated to all the variables and functions that are present in our code. The default value while allocating memory to variables is undefined and for functions is actually that whole function itself.
  Execution Phase : Code is executed line by line and at this time values of all the variables are set to their actual values.

• Global Execution Context(GEC) is created for all the global code i.e. code that is not present inside any function and this Global Execution Context is then pushed inside the call stack.

• Call Stack :- It is nothing but a normal stack data structure which JavaScript uses to manage execution contexts and control of code execution.

• Whenever a function is invoked or function is called a new execution context is created for that function and is pushed at the top of the call stack.

• Once the execution of the function is finished the execution context for that function is deleted and also popped out from the call stack and the control of code execution return to the place where the function was called.

• And at last when our whole code execution is finished Global Execution Context is also deleted and popped out from the call stack.

This how actually JavaScript executes our code.

Conclusion

Execution Context is the foundations of JavaScript and the clear understanding of it will surely help in better understanding of JavaScript altogether. If you can lay a good foundation in understanding the behind the scenes execution of Javascript, it becomes much easier to write code, understand and later debug it.

This article is inspired by the "Namaste Javascript" series on YouTube, taught by Akshay Saini. So if you want a video format of this blog then please refer here

For any query, you can get in touch with me via LinkedIn and twitter.Leave all your comments and suggestions in the comment section. Let's connect and share more ideas.

Happy coding!