Event Loop in 2 Minutes

#javascript #eventloop #ts #beginners

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?

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).
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.

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.
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.
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.
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)

Tommy • Sep 21

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?

Nick A • Sep 23

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

Bhat Aasim • Sep 22

The Reason is Javascript is a Single Threaded.

Kornelije Petak • Sep 22

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. 🤷

Bhat Aasim • Sep 23

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.

Vault Developer • Oct 2 • 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...