Welcome to my first ever blog. I am learning web development and I would like to share my learning on the internet. In this blog we will see how a javascript code is executed. I saw a youtube video explaining this same topic by Akshay Saini and I will explain it in my own words. It will help me to understand it better and also spread some knowledge along the way.
How code is executed in javascript
Every time a javascript program is run, a Global Execution Context is formed. Think of it as a container that stores all the variables, functions and executes all the code written. There are two components in the global execution context.
1.) Memory component
2.) Code component
Let us take an example code and go step by step to see how each line of code is executed.
The javascript code is executed in two different phases.
Phase 1 - Memory creation phase
Phase 2 - Code execution phase
Phase 1 - Memory creation phase
In this phase, the javascript engine goes through the code written, line by line, and reserves memory for every variable and function that it encounters. The way the data is stored in the memory component is like a key-value pair. The variable name as the key and its value as its value.
Let us see this happening line by line.
Figure 3
The moment javascript encounters the 1st line (see Figure 3), it reserves a memory location for that variable with its name as a key(in this case num
) and allocates a value to it. The allocated value is undefined and not 3. In phase 1, the value of the variable is always stored as undefined. Javascript does not care about the value that is assigned to that variable during the memory allocation phase. It stores the variable name as the key and undefined as its value.
Now let us move to the second line.
As you can see, we have a function keyword on line 2. This tells javascript that here's a function declaration. Just like what happened when we declared a variable, a memory location is reserved for this particular function with the name double
but unlike the variable where the value is stored as undefined, the value for the function is the code inside the curly braces "{}". Yes! The entire piece of code inside those curly braces is stored in the memory component, line by line, character by character.
Here's an example (Figure 6) to see the values that are stored in variables and let us see what happens when we console.log num
and double
.
As we discussed above, the value stored in the variable num
is undefined and the value stored in the function double
is the entire code inside the curly braces{}.
The variables inside the double
function do not get stored in the memory component like we saw with the num
variable on line 1. We will see what happens to them very shortly.
The global execution context looks like this after completing line 2.
Figure 8
After the function is stored inside the memory component, javascript goes to the line after the function which is line 6 (figure 9)
Now the code encounters another variable doubleNum
and the same process is followed like with the num
variable where the memory is reserved, the variable is stored in that memory and the assigned value is undefined.
The global execution context now looks like this(figure 10)
figure 10
This marks the end of the 1st phase which was the memory creation phase. Let's go to the next phase. The code execution phase.
Phase 2 - Code execution phase
In this phase, javascript goes through the code line by line again but this time it replaces the undefined with the actual values given to the variables.
Let's see what happens when we encounter the first line in the code execution phase.
figure 11
When javascript goes through the 1st line again, it stores the value(3) assigned to the variable num
inside the memory component. The memory component now looks like this. (figure12)
Next, it moves to the 2nd line where the function is declared and this time, the code is completely skipped till the function ends as it is already stored in the memory component during the memory creation phase.
Now we move to the 6th line and this is where things gets interesting. In this line we invoke a function double
with the parenthesis ()
. This creates an execution context for that function inside the global execution context just like in figure13.
Just like the whole code has a global execution context, every function has its own execution context in which all the variables inside the function are stored. It is like Inception, a dream inside a dream and here we have an execution context inside an execution context. The same process is followed here. First the memory creation phase and then the code execution phase. A memory location is reserved for the variable number
which is the parameter passed to the function. The value given is undefined. Same goes for the variable ans
. This is how the execution context looks like after the memory creation phase.
Moving on to the code execution phase line by line.
figure15
In line 2 the value assigned to the variable number
is 3 because when we invoked the function, we passed num
as an argument to the function which is 3. The undefined value of number
is replaced with 3.
figure16
The value stored in ans
is number * 2
which is 3 * 2
which is equal to 6. So the undefined value of ans
is replaced with 6.
Let us move to line 4.
figure19
When javascript encounters the return
keyword, it takes the value of ans
being returned which is 6 and stores it inside the doubleNum
variable inside the global execution context.
After the function is completed executing, the execution context for that function is deleted and the control returns to the global execution context.
Since we have executed the last line, the global execution context gets deleted which marks the end of the program.
End of program
This was the journey of code execution in javascript. Thank you for reading my first blog. More to come as I learn new things.
Top comments (2)
Wow Parth ,
Its Was awesome
Great article! Increased my knowledge of javascript execution and I completely understood it. Can i also ask for an article which explains what exactly happens when we import files to another files?