Execution of JavaScript code and call stack.
After learning about the components of an Execution Context, let us now see how a JS code is executed.
A lot of things happen behind the scenes when we run a program and understanding these concepts is really important for a developer to write the most efficient code.
Let us quickly understand the execution of JavaScript code in detail.
The first step when the code starts running is the creation of a Global Execution Context, which consists of the memory component and the code component.
This creation happens in two steps
- Memory phase — In this phase, the compiler skims through the entire code and allocates memory to all the variables and functions. Initially, it stores undefined for all the variables and the entire function definition for the functions.
- Code Execution phase — In this phase, the compiler again goes through the code line by line and actually executes the code. Here whenever it finds a value assigned to a variable it replaces undefined which was initially set to the value assigned in the code.
Now as we execute the code line by line, we might encounter a function invocation. This causes another interesting phenomenon behind the scenes.
Since a function can be considered as a small program within itself, it creates an Execution Context for itself and this execution context resides in the code component of the Global Execution Context.
This new Execution context is also created just like the global Execution context, initially, all the variables within the function are set to undefined, and then during the execution of the code, the variables are replaced from undefined to their actual values.
This small Execution context is destroyed when it encounters a return statement, and this takes back the control to the place where the function was called.
This process happens recursively, If the function would call another function within itself it would create another Execution context within it, and so on. And as a result, it would become extremely difficult for the compiler to keep track of its execution. To overcome this problem JavaScript creates a call stack of the execution contexts.
The bottom of the call stack is always the Global Execution Context, as and when new Execution contexts are created they are pushed on the stack and after the execution context returns a value, they are popped from the stack. Hence a call stack maintains the order of the Execution Contexts.
A call stack is called by various names such as Execution Context Stack, Program Stack, Control Stack, RunTIme stack, Machine Stack, etc. But they all mean the same and must not be confused.
Understanding the call stack helps a developer in debugging the program in a very efficient and it takes us one step closer to our goal.
In the next blog, let us learn about Hoisting in Javascript, this is a really important topic and is asked during interviews.
Until then keep coding and keep sharing these articles.
