DEV Community

Event Loop in 2 Minutes

Bhat Aasim on September 20, 2024

What is the Event Loop? The Event Loop is a mechanism in JavaScript that allows the runtime to handle asynchronous operations. It ensu...
Collapse
 
tohodo profile image
Tommy

If the Call Stack is empty, it moves the first function from the Callback Queue to the Call Stack for execution.

If the call stack is like a stack of plates, why can't it add another plate to the stack instead of waiting for it to be empty?

Collapse
 
jovian profile image
Nick A

It can, so long as the next "plate" is in the scope of the bottom "plate".

Collapse
 
bhataasim profile image
Bhat Aasim

The Reason is Javascript is a Single Threaded.

Collapse
 
kornelijepetak profile image
Kornelije Petak

Do you really think a plate analogy for a call stack is needed. I can't imagine a person even clicking on an article about event loop without prior understanding of a call stack. 🤔
Like 'how integrals work' article explaining how addition works. 🤷

Collapse
 
bhataasim profile image
Bhat Aasim

The plate analogy might feel unnecessary for someone with even a basic understanding of how the Call Stack works, especially for developers who are already familiar with concepts like the Event Loop.
I agree that context matters, and simplifying too much can sometimes be more distracting than helpful.

Collapse
 
vaultdeveloper profile image
Vault Developer • Edited

Wow, thank you for the article!
I believe it's very helpful for developers to learn the fundamentals of the event loop, it is important for their future careers.
I know the idea of the topic was to show only the very basics of it.
However, it might be reasonable to mention some small additional details to avoid confusion:

The Event Loop checks the Microtask Queue First, then the Callback Queue.

For the browser environment, there is also a render step, and it is managed by Event Loop as well.
It is important because the heavy tasks in the queue can block the main thread and the next rerender will be managed later, therefore browser won't be able to maintain 60fps and the user will see a lagging interface.

The Event Loop is a mechanism in JavaScript

Strictly speaking event loop is not a part of JavaScript specification, but it's a part of JS runtime. This might be important because different runtimes implement event loops differently. For example, the event loop in Node.js will have a NextTick queue while v8 won't have it.

Microtask Queue: For Promises and Mutation Observer

The promise itself will not go to the microtasks queue, only its callback after promise resolution or rejection.

To dive deep, Jake Archibald's video from the JS conference can be very helpful!
Also, there are several open-source simulations of how the event loop works.
I also create one, feel free to check, I hope you find it interesting!
vault-developer.github.io/event-lo...

Collapse
 
bhataasim profile image
Bhat Aasim

Thank you so much for this. Loved it.

Collapse
 
shikkaba profile image
Me

This article needs examples. Could you add simple examples please?

Collapse
 
bhataasim profile image
Bhat Aasim • Edited

Great i will try

Collapse
 
piyuuussshhh profile image
Piyush Udhao

Thank you for this!!

Collapse
 
bhataasim profile image
Bhat Aasim • Edited

You are Welcome, Now every day I will try to share the Amazing Stuff. Thanks ❣️

Collapse
 
eforeshaan profile image
Eshaan

Great, but if we had an image to see how these components interact with each other, it would have been a much bigger help to re-review our basics!

Collapse
 
bhataasim profile image
Bhat Aasim

Appreciate your Suggestion

Collapse
 
cobbygraves profile image
CODESCRIPT

Well explained and understood 👏

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks

Collapse
 
duythinht profile image
Thinh Tran Duy

Great!

Collapse
 
bhataasim profile image
Bhat Aasim

Thanks!!