How JavaScript code is Executed under the hood !!

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.

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

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.

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.

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

Comments

[Mike Stemle]

There's a lot missing here, entire key subsystems such as garbage collection and the asynchronous event loop. This piece is incorrect insomuch as only primitive values within a function which are knowable at compile time are ever stored in the stack, and all objects are stored in the heap.

There's a pretty good series on JavaScript memory management here: felixgerschau.com/javascript-memor...

This article also covers the event loop and the call stack: felixgerschau.com/javascript-event...

I love your enthusiasm and look forward to reading your next piece.