When we write javascript and the browser executes those codes, many processes take place behind the scenes. In this article, we are going to take a look at those processes.
Let's take an example: Suppose we have created an HTML file and inside that HTML file we have some javascript codes under the script tag. Now when we open the file the browser's JavaScript engine will create a special environment to run the javascript codes. This environment is called Execution Context.
Let's dive deep into the Execution Context.
Execution Context is created in 2 phases :
Memory Creation Phase
Code Execution Phase
Here is a diagram of the Execution Context -
Let's understand what each of the phases does using a practical example:
var x = 5;
function square(value){
var res = value * value;
return res;
}
var operation = square(x)
The above code will run in 2 phases as mentioned above i.e Memory Creation Phase & Code Execution Phase.
1. Memory Creation Phase:
In this phase, it allocates memory to each of the variables and function. If it finds a variable then it will be stored as undefined and if it finds function then it will be stored as it is.
Here is the diagram how memory creation phase will look like for the above function:
Let's understand the above diagram:
**x: undefined **: It happened Because in the memory creation phase as written above all variables will be stored as undefined same goes for the operation variable declared in the code.
square: function square(value){ var res = value * value return res; } : It happened because all functions are stored as it is in memory creation phase.
2. Code Execution Phase:
In this phase variables are allocated with the values meaning undefined will be replaced with the actual values & codes get executed.
The important part here to note is that whenever we will invoke a function a brand new execution context will be created.
Here is the 1st diagram of the code execution phase for the above code:
As you can see in the above diagram :
x:5 : Because in this phase variables are assigned with the actual values.
But you may have been surprised to see another execution context inside the main Code Execution Phase. It happened because we invoked a function in the above code here:
var operation = square(x)
So as written above whenever we will invoke a function a brand new execution context will be created. That's why inside the code execution phase another execution phase is created.
Now just like how we have seen before the new execution context will again go through two phases Memory Creation Phase & Code Execution Phase.
Memory Creation phase diagram:
Code Execution Phase diagram:
Part 1:
In the above diagram as you can see all the variables are assigned with the actual values & res is assigned the value after the calculation is done.
Part 2:
Now
return res;
this line of code states that the code execution of this particular function is completed and return the control to the execution context where this function was invoked.
So when we say return res it detects the value inside local memory. In this case res: 25 and the variable operation is replaced with returned value i.e 25 in this case.
This is all about execution context. Hope you have got a better understanding of it now. In the next article, I will cover call stack.
Thanks for reading.