Event Loop
Hi There! Today’s topic is one of the most important one as we will understand how does the JS Engine executes the code using call stack along with that we understand event loop and callback queue. Alot to cover so let’s get started…
Let’s quickly recap from an example how we know the call stack helps JS engine to execute the code.
Now for the above example we know exactly what is happening. For the program, Call Stack is created and firstly global execution context is added to call stack then we have execution context created for method a and the value is printed on the console then the rest values are printed and the code finishes. Ya ya we all know the story. We know the main job of call stack is to execute what’s inside it.
Everything we see be it call stack be it JS engine all are inside the browser and also are the capabilities like local storage, timer, bluetooth, GPS, DOM APIs etc. Now if we need access to these capabilities JS engine needs to have such connection with the browser. How that is done is by using the keyword window. But as both keyword and web APIs are in global scope we need not use it every time.
Let’s take an example to understand how each web API works with call stack:
The callback function is stored in browser and a timer is set on it of 5 seconds, this callback function doesn’t directly go to call stack but through the callback queue which is on high priority. Whereas, event loop acts as a gatekeeper keeping check on the callstack and the callback queue. If the callback queue has any callback function in it and call stack is empty it will send it asap and get it executed. It clears the callback and when call stack executes completely it will clear the call stack. At the left end in black you can see the console for the method.
Get Neha Prabhakar’s stories in your inbox
Join Medium for free to get updates from this writer.
Now let’s take an example for DOM API:
Similarly, click is assigned to registered callback.
Now question may arise why do we need the callback queue? Let’s understand the reason for it, if button had been clicked 5–6 times then different 5–6 callback functions had been stored in callback queue and they will be executed one by one. This will be managed by the callback queue that is why it is needed.
Fetch functions (PS: when we get data we are fetching it executes the line of code in that function) have interestingly different way to execute. Let’s see with an example how:
As you see above now there is a Microtask Queue, this is on higher priority than callback queue. If Microtask Queue is not empty, event loop will prioritize tasks in it than anything else.
Another most commonly asked question is that which all functions go inside the microtask queue apart from fetch functions?
Answer to its is all callback functions that come through promises and mutation observer go through microtask queue.
Note : Starvation in callback queue -> Where there are a lot of microtasks in the microtask queue and the callback queue doesn’t get a chance to execute.
Hope this was helpful and easy to understand though this blog has alot of information to grasp but I tried to make it as simple a possible. If you found this blog worth reading please go through my profile and have a look at some other interesting content. See you in next one! :) Until then..
