JavaScript Event Loop

Javascript is the single-threaded asynchronous programming language. What does it actually mean, from where the event loop comes into the picture. Let’s solve this.
When we see the JS single-threaded it’s mean the main thread where the JS code executed in one line at a time, whether there is no possibility of doing stuff parallel.

Let’s take an example of a Network request.
Consider facade fetch() takes 100ms to comes back. what if the code to handle the network request in a synchronous blocking way. It will look something like the left side image, this would be a very bad way of doing things. this code blocks the line of execution at the condition to check whether the network request has returned and in the meanwhile, the main thread at the run time would be blocked and managing no other user requests and inputs. No one does this anyway as thus the better way to obtain the same, so callbacks. so then how the JS solve this problem of making network requests. It shows seems to be stuff fast enough.
One method is through callback function, which you can see below.
```makeNetworkRequests(callbackFunction)```
A better way is to use promises. when we use callbacks we make the network request, alone with this we specify a callback function. A function will be called when the network requests will be back. Note as the runtime does not have to keep waiting at the particular line of code checking for the network request, as the callback function would be automatically invoked when the network requests will be completed.

wait, here is something fishy If JS was the single thread and the runtime already moved ahead of the line of code making the network request.
who was waiting for the network requests to come back?
who calls the callback function when network request got completed?
this is indeed a good question to ask.
will answer in a while but before that, we need to clarify some JS fundamentals.
Let’s have brief into to memory organization in JS, this is the ruff rather famous organization how JS is organized? we have a Heap region that works under random execution and is basically used for memory execution.
we have a Stack region which allocates memory in the form of a stack & used to manage functions. for the purpose of understanding event loops, we are more interested in learning about the Stack.
This example will help us to understand call stack in a better way, the function stack in nothing but the stack which keeps tracks of the functions currently executed in the runtime.

From this example, you got the idea, a function when called it’s loaded on to the stack and once the function gets over it’s poped of this stack. this is how the function call stack works.
Let’s just know something about Web APIs. What are web APIs? There is special functionality, that helps us perform additional tasks. we use Web APIs to use the browsers built-in functionality, like console, fetch, etc.

Note: JS is single-threaded whereas browsers itself multithreaded.
Now Finally we can talk about the Event Loop.
To state it roughly the event loop is that entity that pulls stuff out of the event queue and places it onto the event execution stack whenever the function stack becomes the end. That's it!

Now we know about the call stack and web APIs, but what is the Event Queue? Event Queue is the special queue that keeps tracks of all the events that are pending to executed in JS, they are that peace of code that is waiting to run but hasn’t got scheduled to run.
So now the question is how this all works together? for understanding let’s take the example of SetTimeout(func, 5000); when this code will be executed this will be loaded into the stack, Once executed it will call the web APIs, these Web APIs will fire the event after 5000 milliseconds. after 5000 milliseconds takes the callback function and place it into the Event Queue, Noted this callback function has not been run it’s waiting for the call stack to finish When the function stacks become empty all the stack elements are loaded out of this stack that is when the event loop comes into the picture it takes the first function to be executed and places it onto the stack, In this case, the Callback functions. This cycle of calling Web APIs events gets added into the Event Queue and then getting loaded into the function execution stack continuous, and that presides how JS handles the Events. This is how the event loop works. 😜