Asynchronous Behaviour In JavaScript

Hello everyone!
Today I am describing the synchronous and asynchronous behavior of javascript. We all know about it but I want to discuss here the asynchronous behavior of javascript and JavaScript blocking behavior in the browser.
Before knowing about that we need to know how Javascript code works line by line in the browser.
Let's take 2 things that every developer needs to run the code.

1. Code Editor
2. Browser

In the browser, there is a mechanism that converts the javascript code to machine language. In that case, browser contains two things. One is the Runtime environment another is the browser's engine. This runtime environment indicates some objects.
For example window.alert(), console.log(), document.getElementById() and so on. These things are called runtime environments. And the engine that is responsible for converting the human-written code to machine language so that the machine can understand what to do.
In the browser engine, there are two things one is call stack.
let's talk about how call stack works in the code line by line.In the editor our code is

I wrote a simple code where there is a function and some console log and I added a while loop that functionality works after 5 second later. What happened there?
In the call Stack that I mentioned before it first calls a main function. You know every javascript starts from a main function.After that line by line, it called.
JavaScript starts from here console.log("process 1");
so in the stack after calling the main function it calls

process 1

so process 1 is executed.
After that, it called process() ** function.
When javascript goes to the **process function it finds another function which is console.log("process 2");.Then it calls

process 2

After the next line, javascript sees that there is a while loop which is for 5 second .In that time, javascript stops all the browser's activity for 5 second. Even users can not do anything in the browser. This is the JavaScript blocking behavior. After 5 second while the loop is finished, the next line is stored in the call stack console.log("process 3 after 2 sec");
and then printed in the browser.

process 3 after 2 sec

After that the last line is execute console.log("process completed"); and print

process completed

In this code, the problem is this while loop that prevents the activity of the browser for a predefined second. To remove this problem we use asynchronous javascript.

Now see the above code. Everything is the same here I just added the setTimeOut function instead of a while loop. For debugging purposes, I write to console something so that we can understand the execution.
Everything is the same as I described before. Firstly, in the call stack main function is called then the first console log is printed after that process function is called. and it prints the second console log but in the next line, it appears the setTimeOut function, and take it in the call stack but now the interesting thing is there. In previous, when javascript found the while loop it stopped the browser's activity and did not go forward. but now it doesn't do that because setTimeOut is a built-in asynchronous function. In that time javascript passes this function to web API which can handle this function's execution. web API is a part of the runtime environment. javascript just goes forward and passes this setTimeOut function to web API. It executes the next line console.log("process 3"); and prints

process 3
The timer that I set in the function is going on inside the web API. After that last console log goes into the call stack and print

process completed

Now another thing is coming which is callback queue also a part of the runtime environment. Previously we know about the call stack that works like ** Last In First Come*. Now this callback queue works as a queue like **First In First Come.
So callback means that called after some time. here the function that we set in the **setTimeOut* function is a callback function because it will call after the end of the period.
So, when the setTimeOut function calls it after 5 second, the function is stored in the callback queue.Then it goes to another line and execute the console.log("process completed) and print

Process completed

However, now the function that I write inside the setTimeOut function is stored from callback queue to call stack.This time browser is not block for doing the particular work rather it works and execute the another line. Now from the call stack the last code is executed console.log("process called after 5 sec") and print

Process called after 5 sec

So, this is the process about synchronous and asynchronous JavaScript.
In conclusion, asynchronous JavaScript helps us to work without blocking the browser.Here I just write something inside the setTimeOut function but it could be data fetching,a large file read or to bring some data from the largest database. That time it need more time to bring this data. Asynchronous JavaScript help us to do this work using web API and go forward to execute the the code with blocking the browser.

That's all for today.Thanks for your patience to stay with me. Please comments below if you like it.