How Javascript Code is Executed and Call Stack?
Tags: javascript, webdev, programming, computerscience
Published: 2021-11-23 20:08:18

![JS Code Eg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ainkdfnlg2piwhf9ayj7.PNG)
When the above javascript code is run, a global execution context is created. If you want to know about [execution context](https://dev.to/magnus0045/how-javascript-works-and-execution-context-98h) refer to my earlier post.

Execution Context is created in two phases.
**1st Phase:** Memory Creation Phase   **2nd Phase:** Code Execution phase

In **Memory Creation Phase** which is first phase when we run the code, Javascript will run through the whole code from top to bottom line by line and allocate memory to all the variable and functions.
![Execution Step1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi3zh8ou08iemb7co89q.PNG)
the variables i.e **n** and **squareNum** stores a special value called undefined in memory space in this phase and in case of **function** it stores whole code of the function in memory space.

In **Code Execution Phase** which is the second phase, Javascript will again run through the code from top to bottom line by line. In this phase all calculation and functions are done.

![Execution Step 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g584jv7r85wzq3zdneui.PNG)

Now in this phase, first line of code is executed and value of n is changed to **2** from **undefined**
In **line number 2-6** of the code in the above image there is nothing to execute. So,it goes to **line number 7**

**In line number 7** ,it is a function invocation code i.e **var squareNum=square(n);**.So, everytime a function is invoked a **new execution context** is created. The reason is that the functions are like mini programs.
![Execution Step3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbhxbfb2kxf9hb6bvtmm.PNG)
In the similar manner there is memory creation phase and code execution phase in this **new execution context** which is created because of function invocation.
**Memory Execution Phase** of new execution context

![Execution Step 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcmh2iszfieyaug99do9.PNG)
In **Code Excecution Phase** of new execution context the value of num is changed to 2 from undefined.I.e n=2 is passed to num in **line number 2** of the code.
![Execution Step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usybgdxzv39ljp9br6h3.PNG)
In code execution phase then the calcution i.e **num*num** is done in **line number 4** and the value is placed into **ans** variable
![Execution Step 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwgamvlelbeopxtssti7.PNG)
Now in **line number 5** return statement is there this **return ans;** means return the control of the program where the function was invoked i.e to **line number 7**

![Execution Step 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0i4oawbr9jgs70z0h5wq.PNG)
Now as the execution is over so, the **new execution context** which was created while function invocation will be deleted.

![Execution Step 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgngcvslhun0byunxy6j.PNG)
After all execution is over then the **global execution context** also gets deleted.

So,this is how the Javascript code is executed.

**Few extra points to keep in mind.**

Note:every execution context is put inside a stack which is called as call stack so that it executes in a sequential order.

**“Call Stack Maintains the order of execution of Execution Context”**

![Call Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5o6rksokgdgcu811wpag.PNG)
Once the execution is over. The execution context is popped out i.e remove from the stack.

Call Stack also known as
1)Execution context stack
2)Program  Stack
3)Control Stack
4)Runtime Stack
5)Machine Stack

Reference:@akshaymarch7