Asynchronous JavaScript & EVENT LOOP 🔥

In this blog, we are going to learn about Event loop in javascript but before going there we will understand the way even we need that and understand that we need to understand call stack we already learned this topic in our previous blog but lets
refresh it with one example.

console.log('start');
function a(){
 console.log('BE HUMBLE');
}
a();
console.log('end');

Javascript is a synchronized and single-threaded language and it has one call stack where it handles the entire code execution part so as soon as you run the above program the global execution context will be created and then in memory creation
face memory will be assigned to function a() and in code execution part code will be executed and line by line from top to bottom. Here the thing to understand is as soon as the call stack gets something to execute it quickly just executes that code and waits for nothing but what if we have some function that we wanted to call after some time and how do we achieve that in javascript given like thing about setTimeout function will js wait for 5sec if we put 5sec inside setTimeout timer and these are where other things come into picture like js engine and web api lets understand that them.

So in javascript apart from the call stack, there is one more important that handles a lot of different stuff for us and that is our web browser. We use different web apis of web browsers in javascript and below are a few examples.

| |
| Web APIs: |
| |
| - setTimeout |
| - DOM |
| - console.log|
| - fetch |
|_____________|

These are the main web apis that we use most of the time and this is where the event loops come into the picture. Let's understand with setTimeout code example.

console.log('First');

setTimout(function beNice(){
  console.log('Between but last');
},5000)

console.log('Last);

Here in the above code when we execute the code first First and then Last will be printed and to execute this code js might take a few milliseconds but as soon as both lines are executed the global execution context will be popped out of the call stack then what will happen with setTimout function because the timer is still running so here only job of javascript is to register the timer and as soon as timer completed the function beNice() will be pushed into call stack and this is done by call stack.

When the timer is completed the web browser sends that function to the callback queue and the job of the event loop is to continuously monitor the call stack and then this callback queue. First, even loop checks whether the call stack is empty or not then and only then checks if we have something to execute in the callback queue if yes then push that function into the call stack and execute that function. And this is the reason beNice() will be called at last.

// OUTPUT
 First
 Last
 Between but last

But apart from monitoring the call stack and call back queue there is one more thing that the event loop monitors and that is the microtask queue. Let's understand it by the example of fetch.

setTimeout(function() {
  console.log('Hello, world!');
}, 3000);

// Just fetching some rendom todos data
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))

Now here we have two things one is setTimout and another one is fetch and both are web APIs so whom should the event loop give more priority and execute first? and this is where the microtask queue comes into the picture all the tasks that return promises will be pushed into the microtask queue as all APIs call with fetch or axios returns promises and will be pushed inside the microtask queue.

Now event loop will always give priority to MICROTASK QUEUE first and once the microtask queue is empty then and only then does it check whether we have something in the callback queue to execute if then execute it.

And this way event loop helps to connect web APIs and call stack and continuously monitor both. Here in entire both two things, only we need to understand the first CALLBACK QUEUE and the second MICROTASK QUEUE and also how the event loop priorities them in terms of execution.

That's all about Asynchronous JavaScript & EVENT LOOP. And thanks to Akshay Saini for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.