What actually is an Execution Context
Types of Execution Context
Begin to discuss each one by one:
Global Execution Context
Functional Execution Context
Eval Function Execution Context
The execution stack is also known as Call Stack.
In order to understand the working process of the execution stack, let's consider an example code given below:
It is an example code to understand its working.
In this way, the execution of the execution stack is performed.
Creating an Execution Context
An execution context is created first, and then it is managed. The creation of the execution context is performed in two approaches:
Task 2: Creation of the scope chain: After completing task 1, the JS engine initializes the scope chain. A scope chain is a list that has all the variables objects within which the current function exists. A scope chain also has the variable object of the GEC and carries the current function variable object.
Let's try to understand the creation of the Activation object with the help of the below example:
Example Code 1
Now, the JS engine creates an executionContextObj for example code 1 after the invocation of test () and before executing its code. It can be seen in the below code:
The Activation object contains the argument object that further contains the details about the arguments of the function. It carries the property name for every function and variables that are declared within the current function. In our case, the Activation object, for example, code 1will be:
So, in this way, the creation phase works.
The execution phase is the next phase after finishing the creation phase. An execution phase is the one where the JS engines scan through the function in the code once again, i.e., one more time for updating the variable object with the values of the variables and then run the code. Let' see the execution stage or the complete code for the example which we have discussed above:
Example Code 2
Firstly, the above code gets loaded in the browser. After that, the JS engine begins its compilation phase in order to create the execution objects. In the compilation phase, the JS engine manages and handles the declarations only and does not care about the values.
Now, in the execution phase, the following steps will be performed as described per line:
So, in this way, the working of both the creation phase, as well as the execution phase, takes place.
GEC object after the creation phase stage
In the above explanation, we saw how the execution stack is created via the execution and creation phase for example code 2. However, we should take a deep understanding of the working of the GEC and FEC for the above-mentioned code only. Consider the below GEC object code for example code 2:
As you can see above, no code is left, the JS engine moves to the execution phase for scanning the function once more. The JS engine updates the value of the variable then execute the code in the following way as described below per line:
Now, let's see the GEC object after the execution phase.
GEC object after Execution Phase
In our example code 2:
z execution object after the compilation phase
Below is the code for the FEC object after completing the compilation phase:
The code after the compilation phase of the example code 2 is performed as described below:
Execution Context Object of z after the execution phase
In example code 2:
So, this is how the execution context is created and is defined.
Global Execution Context Vs. Function Execution Context
There are the following differences between the two: