Execution Context In JavaScript

If you are new to JavaScript or a seasoned pro you might have heard of the word Execution context. I always used to get confused about what the execution context was and how was JavaScript executing all of this code. But after understanding it I'm here to share my two cents.

Introduction

The JavaScript code has to be hoisted and run in some kind of environment. In most cases that environment is our browsers. So, browsers by default don't have this ability to read the high-level JavaScript code. It has to be converted to a machine code so, that our browsers can understand it. This is where JavaScript engine comes in.

JavaScript Engine is a simple computer program that receives the JavaScript source code and converts it into machine level code so, that the CPU can understand. Popular examples of JavaScript engines are V8 for Google chrome, SpiderMonkey for Firefox.

This JavaScript Engine handles the transformation and execution of the code. It first creates an execution context. Think of execution context as a box containing details about your code. Execution contexts are of two types:

1. Global Execution Context (GEC) : Everything in JavaScript happens inside of the global execution context. There is only one global execution created for a particular piece of code and the global object for it in the case of browsers is window object.

2. Local Execution Context (LEC): This is created inside the global execution context. Whenever your code encounters a function it creates a separate execution context inside of the GEC called as the Local execution context. The local execution context is for execution of the code inside of the function.

How execution contexts are created :

There is a two step process in creation of an execution context.

1. Memory creation phase.
2. Code Execution phase.

Let's suppose we have this code snippet:

var a = 2;
function square(n){
  var ans = n*n;
  return ans;
}
var num1 = square(a);
var num2 = square(4);

So, for this snippet first the Global execution context will be created and in phase-1 i.e Memory creation phase javascript will just skim through the whole code and create memory space for variables and all these variables are initialized to undefined. In case of functions it stores the entire code of the function inside the memory component. The memory creation phase will looks something like this :

Now coming to the second part i.e. Code Execution Phase here the real assigning of values to the variables start. But for the function that we have(function square() in our example) it will create a local execution context inside of the Code component and follow the same steps above for assigning it values. Once, we have reached the end of the function it will return the computed value and destroy the Local execution context created as now the control is going back to line no. 6 i.e. where we will assign the computed value to num1 variable. Here's how it will look after executing code till line no. 7:

Once the code is finished the global execution stack will be deleted. JS manages this creation and deletion of GEC by Call Stack. Call Stack is basically a stack with the first element being GEC. All the Local execution contexts that are being created are placed in this stack and once there work is done popped out of the stack. Call stack is called as execution context stack, program stack, control or runtime stack.

This is a small diagram which might help you better understand the call stack.

Conclusion

This was me giving my thoughts about what Execution context is and how it works in JavaScript. If you want to learn more about the JS you can always refer to Akshay Saini on Youtube his entire playlist Namaste JavaScript is amazing, I'm going through his videos and learning more and more everytime.

If you found this article to be really helpful do share it with your network.