Execution context is the main and basic concept of javascript code execution. In this post, I will give you a brief explanation of the execution context and how it works.
Let's get a simple code part to explain this.
var a = 10;
function square(num) {
var ans= num*num;
return ans;
}
var b = square(4);
If you run the above code in the node environment or the browser and console log the b value, you will get 16 as the output simply.
But every time we run the javascript code, there's behind process called execution context in the running environment. Every time we run a javascript program, this execution context will be created.
What is the Execution context?
The execution context consists of 2 parts.
Memory - Stores the variable and function as a key-value pair.
Code - Code execution part handles.
The memory block stores all declared and defined variables and the functions and code block will handle the execution part after the memory is stored.
I will go through and divide this execution process into a few phases to more explain.
When we execute the above code, execution context will be created for that as I explained before.
there are 2 steps for each execution context.
Memory creation
Code execution
- 1'st Execution context(Global execution context)
When we run the javascript program, the first execution context will be created and that's called 'Global execution context'.
in the memory block stores the a and b variables and the square function as key-value pairs.
- 2'nd Execution context
The second execution context will be created for the square function execution with value 4.
var b = square(4);
As we learned previously, memory will be stored as undefined and value will be assigned when the code execution.
In the next step, values will be assigned to memory and code will be executed.
then code will be executed with given values. then the answer will be assigned to the 'ans' variable.
With that code execution return the output from the 2nd execution context and 2nd execution context will be deleted.
then that returned value will be assigned to the 'b' variable in the Global execution context.
After all the code executions are completed, the Global execution context will be deleted.
If there is more than one function call, execution contexts will be created for each and will be executed according to order in the same way.
Special note
These all execution contexts are handled inside a stack called 'Call Stack'. Whenever a new execution is created, it will inserted into the stack.
The first execution context is always called the Global execution context. And that will be inserted into the stack first. Afterward, other execution contexts will be inserted into the stack according to the creation.
After completion of each execution context, it will be deleted and removed from the stack. This stack maintains the order of execution contexts.
As in the above javascript code example, the Call stack will be working in this way.
The first execution context (GEC(Global Execution Context)) will be pushed into the stack.
After the creation of the second execution context, it is also pushed into the stack.
After E2 is executed and deleted, it will be removed from the stack. then GEC will be executed and removed from the stack.
More Sources
Thank you for reading! Janith is here, This is also my first post on Hashnode, thank you the community. If you have any questions, feel free to comment below.