Introduction

JavaScript is an amazing language, it powers almost all the modern and old web applications on the internet, which makes the world go and helps people connect. But as a developer, have you ever wondered how JavaScript code is executed? Is it just like other programming languages? Well, certainly not.

We will be looking at the Flow of JavaScript code execution and how JavaScript code is executed behind the scenes!

Some things to know beforehand

There are some things we need to know and understand before we look at how JS code is executed, as these things are interconnected with each other.

JavaScript Engine

The JavaScript engine is what compiles the JavaScript source code into binary so that the machine's CPU can execute it. A Popular example is the V8 engine, which is used by several web browsers and runtime environments out there.

Call Stack

A Call Stack is a place where execution contexts are stacked on top of each other and it helps identify where we are in the program's execution. It resides inside the JS Engine.

How JavaScript code is executed?

First, let's take a look at this example code which will be executed later

const name = 'Samir';

function One() {
    const randomNumber = RandomNumber();
    return randomNumber;
};

function RandomNumber() {
    return Math.random() * 10;
}

const something = One();
console.log(something)

As you can see in the code snippet, there are 2 functions declared that have some code in them, two variables declared outside the functions, and we are calling One() and console.log() in the end.

Execution contexts are created

Once the JavaScript code has been compiled, it is now time to execute it inside the engine, and to do so, first an Execution context is created. But what is an Execution context? It is like an environment that encapsulates all the necessary piece of information that is required to run the JavaScript code. And then runs the piece of code inside the engine.

There are 2 types of Execution contexts in JavaScript:

1. Global Execution Context

2. Function Execution Context

Global Execution Context - This context contains and runs all the JavaScript code that is not inside of a function. So in the above code snippet, the code outside the functions One() and RandomNumber() will be run in the Global Execution Context.

Note! There can only be one Global Execution Context for each JavaScript file!

Function Execution Context - This context contains and runs all the JavaScript code that is inside of some particular function or callback. Hence there can be multiple Function Execution Contexts for one JavaScript file.

The code inside One() and RandomNumber() each will receive their Execution contexts.

Furthermore, there are 2 phases of creating an execution context!

1. Creation phase

2. Execution phase

Creation Phase

In the Creation phase, there is a lot that is happening. First, it creates a variable environment. All the variable declarations inside the context are initialized first with an undefined value. (This process is called hoisting)

Then, a scope chain is created for the execution context. It is something that helps the Execution contexts to access values outside of a function, but let's not deep dive into that.

Finally, this keyword is initialized for the execution context.

All of these are generated during the creation phase, which happens right before the execution.

Note! Execution contexts for Anonymous functions (or Arrow functions) do not get their arguments or this keyword.

So in the above code snippet, there will be one global execution context, and two function execution contexts will be created for One() and RandomNumber() respectively.

Execution Phase

Now comes the Execution phase! Each execution context that is created will be sent inside the Call stack and then stacked on top of other execution contexts. The execution context which is at the very top will be executed first, and once it is finished executing, it will be popped off the Call stack.

First, the Global execution context will always come and be executed in the Call stack.

Then we move on to the next lines of code until we encounter a function call in the script. In the above code snippet, the One() function has been called. Now it will be given its Execution context and then sent to the Call stack for execution. It will be put on top of the global execution context, as the code inside the function will be executed next.

The function then calls another function called RandomNumber() So now another Execution context is created for this function which will be stacked on top of the already being executed context of One() Once this function has finished returning a random number, its execution context will be popped off the Call stack and the execution context of One() will resume executing further! Then that execution context will also be popped off and we are now left with only the global execution context. After finishing executing the rest of the code, the call stack and the global execution context will remain in the same state and wait until there some other callback function is required to be executed.

The global execution context finally popped off once we have finished running the program. That only happens when we for example close the browser tab, otherwise, it remains in an 'idle' state only.

Conclusion

This is also how JavaScript keeps track of which piece of code it should execute next and where it is right now in the program thanks to Call stack! It maintains the order of execution, which is crucial. The reason we cannot execute all the Execution contexts at the same time is that JavaScript is a Single threaded language! So it can only execute one line of code at a time! That is why all the Execution contexts are queued on top of each other inside the Call stacks so that they can be executed in the exact order they are expected to be.

Well done! Now you know how JavaScript works behind the scenes and how the code is executed inside the browsers! If you have made it to the end, Thank you so much for reading this! 💝