What is the Event Loop in JavaScript?

Understand the Event Loop, Call Stack and Callback queue in JavaScript

Sun, 02 Feb 2020
3 min read

Event Loop
Source: https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

What is the Event Loop in JavaScript?

More often than not, we don’t need to understand this core concept of JavaScript. We can go on our merry way of developing Web Applications and Websites without understanding this. But at times, there are situations (ahem interviews) that might ask you to elaborate what the Event Loop is. Or simply if you wanted to understand how JavaScript works behind the scenes.

After reading this article, you’ll be able to answer the following questions easily:

  1. What happens when we execute JavaScript code?
  2. How does the Event Loop handle work?

Event Loop

Here’s what MDN says about the Event Loop.

JavaScript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks. This model is quite different from models in other languages like C and Java.

When I first read this, I was like, there are too many things that I don’t know. Let’s talk about them one by one. There are four key terms needed to explain the Event Loop:


1. Concurrency Model

According to MIT:

Concurrency means multiple computations are happening at the same time.

Basically, a Concurrency Model is just a defined way of managing multiple tasks (concurrency) inside a Computer.

What’s the Concurrency Model that a browser follows?

The browsers’s Concurrency Model is the Event Loop.


2. Executing the code

The Call Stack is a part of the Event Loop which is responsible for executing the code.


3. Collecting and processing events

An event is also known as a message and it’s just a function callback. Any new event that comes in to be executed is pushed into the Callback queue.


4. Executing queued sub-tasks

The Event Loop monitors the Call Stack and the Callback Queue. When the Call Stack is empty, it will take an event (which is just a callback) from the Callback Queue and push it on to the Call Stack. It is only then that the Call Stack is executes the event.

One such iteration is called a tick.


Conclusion

Here’s a graphical representation of the Event Loop.

Event Loop
Source: https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

The Event Loop is an infinite loop that keeps waiting for a queue (sometimes referred to as the Callback Queue or Event Queue) to be filled with tasks. As and when the callback queue gets filled up with a task, the Event Loop kicks in and removes the task based on FIFO (First In First Out) from the Callback Queue. It is then pushed on to the Call Stack which executes the task.

Loading...
divyam rastogi

Divyam Rastogi is a front-end developer who loves everything Javacript-y. He’s been in the industry for about 6 years and has worked with many frameworks like express, mongodb, backbone.js, angular.js, react and vue.