Have you wondered how your code is executed under the hood by Js engine?Execution context is the answer. To manage these context, execution stack is used.
Javascript is the most commonly used programming language and find its application ranging from web apps, mobile applications , backend applications etc.
https://insights.stackoverflow.com/survey/2020#technology-programming-scripting-and-markup-languages
It is important as a developer to hold a strong grasp on the fundamentals of JS so that we can use it to create scalable, highly performing applications.
Consider this trivial code in Javascript:
Have you wondered, how JS engine run this code? If not, then keep follow this article and we will unravel the mystery together behind how JS work under the hood . but before, let’s quickly recap some jargons.
- Javascript is a single threaded language which means that the code is executed in synchronous flow.
- In Javascript, functions are considered as object that have key/value pair.
- Global execution context : This is the default execution context which comprises of the global scope, functions declared, in case of browser the window object, this reference pointing to the window.
- Function execution context: It is considered as the context inside the of functions. All the lexical scope to the particular function comes under it.
Execution context is defined as the environment in which the code is executed runtime. The whole runtime execution is divided into two parts i.e. Creation and execution. Let’s dive into each one by one.
Creation phase: In this case, each line of code is executed in serial manner. Generally, this step includes allocating the memory to the variables present in global or function context depending upon the scope they are in. they are generally considered as undefined during this phase.
Execution phase: This phase includes the real computations inside the scope. all the variables are computed and finally given the value , functions are executed in this phase. Once this phase ceased then it finally destroyed and removed from the current stack.
Enough of theory. let’s apply what we have learn. I am going to use (Js Visualizer). https://ui.dev/javascript-visualizer/ .
Let’s back to the the code mentioned above.
On right side, We can find Global execution context ( ie global scope ) and it includes window object, this reference referred to window, outer is a function and in creation phase is initialised with the function reference. Note: initial_sum is global variable equal to undefined. This whole structure yield during Creation phase.
Now, once creation phase ceases. the next phase starts i.e. Execution phase.
Here all the function context ( if any) starts to execute. these function have their own execution context which further follows the whole execution context procedure.
We can find the execution context of the outer function which on execution phase yields the value of final_sum and num.
So, now we know about how this context are executed during runtime. but if we have too many functions and to make things worse consider nesting functions too. Then this whole procedure becomes complex and cumbersome. In order to manage it efficiently execution stack comes into the picture.
Execution stack: All these execution context are arranged in a FIFO manner where the recent context is at the top and the first one to be removed once the context is destroyed.
Conclusions:
Finally, we are aware about the Execution context and execution stack. how Js engine use these principle to execute the code under their hood. If you like then pls share with your Js devs.
