How JavaScript code is Executed under the hood !!
Tags: javascript, typescript, programming, tutorial
Published: 2024-01-19 13:59:36



> JavaScript is one of the most simultaneously hated and loved programming languages on this planet

_Today JavaScript is used almost everywhere like in mobiles, televisions, even in light bulbs🤯_

In this article, we will try to understand how JavaScript works under the hood. Despite its widespread use, around 98% of developers still don't fully grasp how JavaScript works. By the end of this article, I assure you that you'll in top 2% 😉

_JavaScript is a synchronous and single-threaded language_

**Synchronous** means that when JavaScript code runs, it goes through line by line and executes each line without waiting for anyone! (Don't worry; we'll get to the asynchronous part later. If you're not familiar with asynchronous JS, mark my words, you're going to love it!)

A **thread** refers to a call stack, a data structure that keeps track of the code currently being executed.

![Call_Stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dxezv09yzq9jvyl3c4g.png)

## Now, here comes the main part !!

How JavaScript code is compiled ?

JavaScript is a high-level programming language, remember it cannot be ran on any terminal/system, it need js runtime environment to work. 

What is JavaScript Runtime Environment?
It is just an environment where JavaScript's high level code is converted to low machine level code. That's all you need to know about JS Runtime.
Examples of Runtime are :- Chrome uses **V8 Engine**, NodeJS also use **V8**, Firefox uses **SpiderMonkey**, Edge uses **Chakra**, etc.


**How JavaScript is Executed ?
**
A brand new Execution context is created and after that

JavaScript Code is executed in two phase:
1. **Memory allocation**
2. **Code Execution**



![Execution_Context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5122o9xdny1j5no9nd77.png)

As you can see in above illustration there are two phases

Let's try to understand with the help of code sample


```
var a = 1
var b = "Luffy"
function Random () {
console.log("Favorite no of " + b + " is " + a);
}
Random();
```
When we try to execute above code it will go through two phases
Memory Allocation & Code Execution.

**Memory Allocation:**
In this phase JS runtime goes through every line of code one by one from top to bottom and allocate memory to every variables, functions and constants. 
As this part is mainly allocation phase so no computation is required.

You can refer the below illustration for visualization.  


![Memory_Allocation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eqdtfjqlx1e9xuwm73br.png)

Now you might wonder what is undefined I see in this figure.
So, undefined is special keyword in JavaScript which is given to variables before assigning values to them.
(Note: let & const works differently in that case we will discuss later).

**Code Execution:**
In this phase JS runtime again goes through line by line code from top to bottom, and now allocates the values to `var` if in case of variable declared, calls and executes the function and after going through complete code it pops itself from main call stack.


![Code_Execution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i72yxe2ztzrloe7opzl1.png)

As you can see in above reference image how code is being executed. And in case of any function call a brand new execution context is created and after its execution it just gets popped off.

That's all how code is executed in JavaScript 🎉 



_Please add comment if you find any mistake_

If you like such content let's connect !!
[Twitter](https://twitter.com/AdwaitBokade)