What is an event loop in JavaScript?

Key takeaways:

• The event loop allows JavaScript to handle multiple tasks in a non-blocking way while remaining single-threaded.

• JavaScript uses the call stack to process synchronous code and the event queue for asynchronous tasks like API calls, timers, and user events.

• The event loop continuously checks the call stack and processes tasks from the event queue only when the call stack is empty.

• Asynchronous operations in JavaScript, such as timers or API calls, are handled efficiently by browser APIs, which pass tasks to the event queue for execution after the main thread is free.

• This system allows JavaScript to maintain a smooth user interface while executing background operations concurrently.

Before diving into the event loop, it’s essential to recognize that JavaScript is a single-threaded language. This means that JavaScript can only execute one piece of code at a time. It uses a single thread to handle all tasks, whether they’re synchronous or asynchronous. However, if JavaScript can only handle one thing at a time, how does it deal with multiple asynchronous events, such as fetching data from a server or waiting for user input? This is where the event loop comes into play.

What is the event loop?

The event loop is a mechanism in JavaScript that manages the execution of multiple pieces of code, including asynchronous tasks like timers, callbacks, and promises. It gives us the illusion of multi-threading using a few smart data structures. It allows JavaScript to efficiently handle non-blocking I/O operations while maintaining its single-threaded nature.

In simpler terms, the event loop checks for tasks that are ready to be executed, processes them, and continues to check for more tasks. It helps ensure that asynchronous operations, such as API requests, timers, and user interactions, don’t block the execution of other code.

How the event loop works

Let’s take a look at what happens on the backend. The event loop works in tandem with two main components:

• Call stack: The call stack is responsible for keeping track of all the operations in line to be executed. Whenever a function is finished, it is popped from the stack.

• Event queue: The event queue (also called task queue) is responsible for sending new functions to the stack for processing. It follows the queue data structure to maintain the correct sequence in which all operations should be sent for execution. All asynchronous tasks, like timers and events, await execution once the call stack is clear.

Here’s how the event loop works in steps:

1. JavaScript executes synchronous code: When JavaScript runs code, it pushes function calls onto the call stack and processes them one by one.

2. Asynchronous tasks are pushed to the event queue: When an asynchronous task, such as a timer, an API call, or an event, is ready to be executed, it’s placed in the event queue.

3. Event loop checks the call stack: The event loop continuously checks whether the call stack is empty.

4. Processes tasks from the task queue: If the call stack is empty, the event loop picks the next task from the event queue and pushes it onto the call stack for execution.

Whenever an asynchronous function is called in JavaScript, it interacts with a browser API (in environments like browsers), which handles operations like timers, network requests, and more. The API processes the task independently of the main thread (JavaScript being single-threaded) without blocking further code execution.

For example, when the setTimeout() function is called, it triggers a timer in the browser’s API. After the specified time, the timer’s callback is placed into the event queue.

The event loop constantly monitors the call stack and the event queue. If the call stack is empty, the event loop moves the next function from the event queue into the call stack for execution. This creates a non-blocking, asynchronous execution flow in JavaScript.

Example of the event loop in JavaScript

Let’s take a simple example to see how the event loop works with both synchronous and asynchronous code:

In the above code:

• Line 1: The console.log('Start') is executed synchronously and prints “Start” to the console.

• Lines 4–6: We use the setTimeout() function. Since it’s asynchronous, the callback function is placed in the event queue and will be executed after the two-second timer expires.

• Line 8: The console.log('End') is executed synchronously and prints “End” to the console.

Once the timer is finished (after 2 seconds), the event loop picks the callback from the task queue and pushes it onto the call stack. It prints “Timer done” to the console.

So the output will be:

The asynchronous task (the timer) is handled after all synchronous code is executed. It demonstrates the non-blocking nature of JavaScript’s event loop.

Why is the event loop important?

The event loop allows JavaScript to perform non-blocking I/O operations, which are essential for modern web applications. Here’s why it’s important:

1. Efficient asynchronous handling: The event loop enables JavaScript to handle tasks like fetching data, handling user input, or working with timers without blocking other parts of the code from executing.

2. User interactions: By using the event loop, JavaScript can handle multiple user interactions (like clicks or typing) while continuing to perform background operations without slowing down the user interface.

3. Single-threaded but concurrent: Even though JavaScript is single-threaded, the event loop allows it to handle multiple operations efficiently by delegating tasks to the task queue and running them in an order that doesn’t block the main thread.

Knowledge test

Let’s attempt a short quiz to assess your understanding.

Summary

The event loop is a core mechanism in JavaScript that allows the single-threaded language to handle asynchronous tasks without blocking the main thread. It works in conjunction with the call stack, which processes synchronous code, and the event queue, where asynchronous tasks wait to be executed. As JavaScript runs, the event loop continuously monitors the call stack, only processing tasks from the event queue when the stack is empty. This system enables efficient handling of I/O operations, user interactions, and background tasks, allowing JavaScript to run smoothly and responsively despite its single-threaded nature.