DEV Community

Bhat Aasim
Bhat Aasim

Posted on

Event Loop in 2 Minutes

Event loop in 2 minutes

What is the Event Loop?

The Event Loop is a mechanism in JavaScript that allows the runtime to handle asynchronous operations. It ensures that JavaScript remains responsive and non-blocking by managing the execution of multiple tasks in a single-threaded environment.

How Does the Event Loop Work?

  1. Single Threaded Execution: JavaScript is single-threaded, meaning it can only execute one task at a time. This is managed by Call Stack, where functions are executed in a synchronous manner (means one by one).

  2. Call Stack: The main thread in JavaScript where synchronous code is executed. It keeps track of the currently executing function.



Think of Call Stack as a stack of plates.
Every time a function is called,
a new plate (function) is added to the stack.
When a function completes,
its plate (function) is removed from the stack.


Enter fullscreen mode Exit fullscreen mode
  1. Web APIs: For Async operations like setTimeout, HTTP Requests, fetch, and DOM Events, JavaScript uses Web APIs provided by the browser. These operations are handled outside the Call Stack.

  2. Callback Queue: When an async operation completes, the callback function is added to the Callback Queue. This Queue waits untill the call stack is clear to push the callback function to the call stack.

  3. Event Loop: The Event Loop continuously checks the Call Stack and Callback Queue. If the Call Stack is empty, it moves the first function from the Callback Queue to the Call Stack for execution.

  4. Microtask Queue: For Promises and Mutation Observer, JavaScript maintains a separate queue called Microtask Queue. Microtasks have higher priority than Callback Queue tasks. The Event Loop checks the Microtask Queue First, then the Callback Queue.

That's the Event Loop in a nutshell! It's a crucial part of JavaScript's runtime environment, ensuring that asynchronous operations are handled efficiently and that the application remains responsive.

Interviewer: Welcome to the Team!! 😎🚀

Top comments (20)

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!!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.