How does javascript work in the background (Part 1)

Hello community,

Right now javascript is one of the most popular programming languages in the world.

In this blog i will share the most important concepts about javascript that you have to know as web developer .

  1. Thread of execution and Global execution context

As we know javascript is a single thread language this is mean that every javascript code execute line by line using Thread of execution , and this process happens inside a container called the global execution context.

but this global execution context can contain lines of code and also functions so how can javascript handle this situation?

the answer is that every function in javascript has own execution context, when a function get invoked javascript will create a brain new execution context then the thread of execution will switch from the global execution context to the brain new execution context and starts running function’s code line by line, Javascript manage all the execution contexts with something called Call Stack.

2. Call Stack (Last In First Out)

By default the call stack contain the global execution context, when a function get invoked javascript push it inside the call stack so the thread of execution switch from global to this new execution context and when the function done javascript will remove it from the call stack then the thread of execution go back to the global.

in this example when the thread of execution comes to line 7 javascript will figure out that this is not a simple line of code but it is a function call so it will push this function into the call stack and create a brain new execution context so the thread of execution switch from the global to this new execution context and go throw the code of SayHello() line by line.

3. CallBacks, CallBack Queue and Event Loop

Javascript is a single thread language it can’t handle many operations in the same time but what makes it very powerful is its asynchronous nature this is mean that javascript when execute an asynchronous operation didn’t wait for the result of this operation cuz waiting the result of an asynchronous code will make it a slow language (example get data from database). So the idea is to run any asynchronous code without waiting the result and jump to the next line when the result is ready javascript get it using callBack functions. To simplify a callback function is a normal function get executed when an asynchronous operation done in order to get or manipulate the result.

But the question now is where javascript store these callback functions and how can it manage their order?. The answer is CallBack Queue basically it is a simple queue (first in last out) using just to store callback functions until the asynchronous operation done .

In this example we have an asynchronous function called getUserDataFromApi this function will take 1 second to get the data i used setTimout function to simulate the real http request, to get the result i passed a callBack function called ShowUserData takes userdata as an argument and console log it.

Let’s what will happen when when the thread of execution run the function getUserdataFromApi() at line 13 :

when the thread arrive to line 8 getUserdataFromApi() will be pushed into the Call Stack , a brain new execution context will be created, and the callBack function ShowuserData will be pushed into CallBack Queue.

javascript will not wait 1 sec for the result but it will remove getUserdataFromApi() from the call stack and go back to global to execute the next line and console log the number 2.

After 1sec the result will be done and the call stack will be empty then javascript will remove ShowUserData() and push it into the call stack and a brain new execution context will be created.

There is an important information you need to know that any function in the callback queue will be pushed into the call stack just when this call stack is empty but the question is how javascript will know if the stack is empty or not?

Here we introduce the Event Loop who is responsible for checking if the stack is empty or not. If the call stack is not empty even after 2 sec the ShowUserData will wait more.

The output of our example will be :

1

2

user data

Full Stack Developer & Blogger

Full Stack Developer & Blogger