JavaScript Event Loop: Explained
The concept behind the Event Loop:
You may already hear about the asynchronous nature of JavaScript. Well, the secret behind this asynchronous nature is the Event Loop. JavaScript event loop is a very simple concept to understand. In fact, you may see this pattern occurs in real life so many times. Let’s take it step by step.
We already know that JavaScript is a combination of synchronous and asynchronous events. Synchronous events occur one after another and asynchronous events are things like callbacks and promises.
However, let’s starts with synchronous events and discuss the concept of the Event Queue. Because it’s much easier to explain and understand. Then we can move to asynchronous events.
Let’s jump into a real-life example,
Imagine a restaurant with just one waiter. Imagine the life of that poor guy. 😰 There are few guests in the restaurant sitting on different tables. This waiter has to provide service to them all. Assume one guest raises his hand to place an order, then the waiter goes to his table to take the order. While the waiter taking the first order, another guest raises his hand to place an order. So, what does the waiter do in such situation? The waiter will not immediately go for the second table, instead, he will make a mental note to go to that second table after he is done with the first one. Assume another 3rd guest calls him, he will add that to his mental note too. Once he is done with a certain activity, he goes through the list of things he noted in his mind. And he does them on First Comes First Serve basis. So, this is what we called an Event Loop. 😄
Okay, now let’s come to JavaScript,
JavaScript is a Single Threaded language which simply means there is only one thread that does all the work. Yeah, I know there are some exceptions like worker threads. However, the application execution is just one thread. right?
Call Stack in JavaScript
When JavaScript’s single thread picks up an event and that event happens to be a function that calls another function. These nested function calls will block the main thread synchronously. Well, here single thread has no other choice but to follow a stack of function calls until the first function has completed its execution. This kind of nested function calls usually managed using the Stack data structure. JavaScript uses something called Call Stack to manage these nested function calls. Whenever a function finished its execution, it will be popped out from the call stack.
In JavaScript, we have something called Event Queue which is similar to the waiter’s mental note 😄
So, when JavaScript picks up multiple events it will take the first event and execute it. Other events will be added to the Event Queue on a First In First Out basis. Once the execution of the first event and its nested functions which reside in the call stack are finished, JavaScript will take the next event from the event queue and start execution. This will continue until the Event Queue is empty. This is what we called JavaScript Event Loop. It’s that simple, right? 😉
Look at this pseudo code 👇
while isNotEmpty(eventQueue)
pull out first item from the event queue
follow the execution logic until call stack is empty
Now let’s see how Event Queue works in asynchronous JavaScript
When an asynchronous event happens there will be often a callback function associated with it. When that async operation completed, the callback will not immediately be executed. Instead, it will push to the end of the Event Queue.
Look at this pseudo-code and the diagram 👇
print ('I will be the First')
fetchFromAPI(URL, callback => print('I will be the Third'))
print ('I will be the Second')Call back will be pushed to the Event Queue 👇
Cool !!! right? 😃 In this article, we have discussed the concept of the JavaScript Event Loop. So, I hope you’ve learned something, and Thanks for reading. CHEERS!!!
Happy Coding!!!
