Hi reader, so I will be talking about the story of Atharv. He was learning javascript, then one day someone asked whether javascript is synchronous or asynchronous. He was not knowing the answer. So he did the google search. When he read the first blog then from that blog, he came to know that javascript is single-threaded as well as asynchronous language.

This line confused him. If the same is happening with you then don't worry after reading this blog you will get much more clarity on this topic.

Synchronous - This means that sequence by sequence. So the code which we execute in javascript is been read line by line. As javascript is a single-threaded language. So code is been executed in a sequential manner.

So when the code will be executed then it will be executed line by line.

1. First the 'main' will be consoled to the screen.
2. After this 'hello' will be consoled and then 'second' will be consoled.

It was very easy to predict the output in this question. But when you go into deep then this will become more complex. So now let's take another example.

In this example, the first 'main' will be consoled to the screen. And then it will come to line no. 17, where it will invoke 'displayHello()' function.

Inside displayhello() function there is first() function, so "first" will be consoled, then "hello" and then "Second".

But how javascript is taking care of the sequence so accurately. So here comes the concept of - CallStack The call stack is the stack which is keeping track of the javascript code and its code is been displayed with the help of that. All the javascript's code sequence is been maintained in the call stack. It is present in the browser developer tools.

The call stack is responsible for the flow of code. Doesn't matter whether it is synchronous or asynchronous.

Now let's look that what asynchronous is - Asynchronous - It means that not in a sequence, In asynchronous javascript, code is not been executed in a sequential manner. We can get asynchronous code by browser API or promises.

Some of the browser APIs are setTimeout, onClick, onChange, etc.

Promises - Whenever we want to get data from the server-side, so we use promises, It means that we are promising the browser to continue to execute the next line of code, till that time data will come from the server.

Talking about little brief about promises, Promises have three states, success, pending, and rejected. When the fetching of data is successful then that state is known as success. When the fetching of data is failed then that state is known as rejected. And when the state is noted successful as well as not rejected then we can say that it is in the pending state.

Now let's come to the working of javascript code in the browser.

In the browser, there are some tools that help to make our javascript code run smoothly and hassle-free.

Below are the import tools.

1. Call stack.
2. callback queue.
3. microtask queue.
4. event loop.

When talking about working behind the scenes, then it is very important to understand these tools.

Let's understand this with the help of an example, it will make it easier to understand.

First I will tell you about the output - main Hi atharv Bye Hi Harsh This is a promise one this is the second promise this is a timeout.

So now let's understand how that outcome came along with understanding the cool tools which I mentioned above.

When our code will run into javascript, so it will start to execute line by line of synchronous code. So at line no. 11, it encounters console.log('main'). It will implement that.

Then after that line 12 will be consoled to the screen.

Now line 14 should be printed but as it is asynchronous so it will go to the callback queue.

line 16 is also asynchronous but instead of going to the callback queue, it will go to the micro task queue, because promises are sent to the microtask queue whereas setTimeout / event handlers are sent to the callback queue.

Call back queue have less priority than the microtask queue, so the first micro task will be implemented and then the callback queue.

Now coming to an example, line 22 is promised so it will go to microtask.

line 26 is simple so it will print it directly.

So all our synchronous code is over but asynchronous code is remaining.

As soon as our call stack is empty then here comes the role of the event loop. Event loop checks if the callstack is empty, if it is empty then it sends asynchronous code to the call stack.

We have one setTimeout in the callback and two promises in microtask.

As microtask is having more priority so our promises will be implemented first in a sequential manner and then our callback queue will be implemented.

So this is how javascript works behind the scenes.

Thank you so much for reading this article.