How code is executed in Javascript.
Tags: javascript
Published: 2021-08-12 05:56:47

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] (https://www.youtube.com/watch?v=iLWTnMzWtj4&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=3) 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

![Global Exec Context.docx - Word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o54f9jker5ohkp9p9jux.png)*Figure 1*

Let us take an example code and go step by step to see how each line of code is executed.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58d5yjr2megnldwgi30j.png)*Figure 2*
 

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.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vhw4fzm4inh3inhaww4f.png)*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.

![Num-undefined.docx - Word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rar3sm56dh908fkdveel.png)*Figure 4*

Now let us move to the second line.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fievw6uxzso4myn3dlqg.png)*Figure 5*

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.

![example-code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp7o7n59t20t0r8ynnpz.png)*Figure 6*

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`. 
 
![example-code-answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h311tnfgqa08g04jso17.png)*Figure 7*

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.
![Global Exec Contex 2.docx - Word](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p3105g1gyjda41soz2e.png)*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*)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ar6nxswq1wiv9dq2tf4.png)*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*)
![GEC finsihed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zxiid11gkodpojzrgrj.png)*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.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vhr5vbt7k6ymsw3wm5i.png)*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*)

![GCE code exec 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/95khr8ku9gpmb7imqnwp.png)*figure 12*

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*.

![13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwswm5ag7875d1x0n57r.png)*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.

![14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd5dy3wlwqewddvg7bqo.png)*figure14*
 
Moving on to the code execution phase line by line.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0lex935do7c381eoclk.png)*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**.
![16](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw2fmobqq9hz6wbfm0uk.png)*figure16*

Moving on to line 3.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9hduxhz4iape8p69b81.png)*figure17*

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**.

![17](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0qpgj0ro9txle8qhbxb6.png)*figure18*
 
Let us move to line 4.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgqo5vxedw3yhwl7rkzc.png)*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.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvwcxfgcgd7sr1acb5rh.png)*figure20*
 
After the function is completed executing, the execution context for that function is deleted and the control returns to the global execution context.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lx4ypzxoq4flizwr963v.png)*figure21*
 
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.