Event Loop in JavaScript

Introduction

In this tutorial, you will learn the concept of the Event Loop in JavaScript.

JavaScript is a single-threaded programming language. It means to execute one task at a time.

But modern applications perform many tasks like API calls, timers, and user interactions simultaneously.

Q: How does JavaScript handle blocking tasks?

Ans: through the Event Loop.

What is the Event Loop in JavaScript?

The Event Loop is a mechanism that allows JavaScript to perform non-blocking asynchronous operations.

Process:

It continuously checks whether the Call Stack is empty, and if it is empty, it moves tasks from the Callback Queue to the Call Stack for execution.

JavaScript Execution Components

To understand the Event Loop, you need to know these four components:

1. Call Stack
2. Web APIs
3. Callback Queue
4. Event Loop

1. Call Stack

The Call Stack is where JavaScript executes functions.

Example:

 function greet(){
   console.log("Hello");
}
greet();

Execution order:

Call Stack
---------
greet()
console.log()

Note: Functions are added to the stack and removed after execution.

2. Web APIs

Web APIs are provided by the browser environment.

Examples like:

1. setTimeout()
2. fetch()
3. DOM events
4. Geolocation

Example:

setTimeout(function(){
   console.log("Hello after 2 seconds");
}, 2000);

Note: The timer is handled by Web APIs, not the Call Stack.

3. Callback Queue

When asynchronous tasks finish in Web APIs, their callback functions move to the Callback Queue.

Example of a Queue:

1. setTimeout callback
2. click event callback
3. fetch response callback

Note: But these functions do not execute immediately.

4. Event Loop

The Event Loop constantly checks: “Is the call stack empty?“

If YES, it moves the first function from the Callback Queue to the Call Stack.

Process:

Callback Queue → Event Loop → Call Stack

Event Loop Example

console.log("Start");
setTimeout(function(){
   console.log("Inside Timeout");
}, 0);
console.log("End");

Output

Execution Of the Process:

1. console.log(“Start”)
2. setTimeout() goes to Web API
3. console.log(“End”)
4. Timeout callback goes to queue
5. Event Loop moves it to Call Stack

Visual Flow of Event Loop

Call Stack
   ↓
Web APIs
   ↓
Callback Queue
   ↓
Event Loop
   ↓
Call Stack

Event Loop Summary Table

Why is the Event Loop Important?

The Event Loop allows JavaScript to:

1. Handle asynchronous tasks
2. Prevent blocking operations
3. Manage API calls efficiently
4. Run timers and events smoothly

Note: Without the Event Loop, JavaScript applications would freeze while waiting for long operations.

Real-Life Example of Event Loop in JavaScript

Example: Food Order in a Restaurant

Suppose, you go to a restaurant and place an order.

1. You place your order with the waiter.
2. The waiter sends the order to the kitchen.
3. While the food is being prepared, the waiter serves other customers.
4. When the food is ready, the waiter brings it to you.

This is very similar to how the JavaScript Event Loop works.

1. The main thread is like the waiter.
2. Long tasks (like API calls or timers) go to the Web APIs (kitchen).
3. When they are finished, they go to the callback queue.
4. The event loop checks if the call stack is empty and then pushes the callback to execute.

Example:

console.log("Start");
setTimeout(() => {
  console.log("Loading data...");
}, 2000);

console.log("End");

Output:

Explanation:

1. Start is executed first.
2. setTimeout() is sent to Web APIs.
3. End runs immediately.
4. After 2 seconds, the callback moves to the callback queue.
5. The event loop moves it to the call stack when it becomes empty.

Interview Questions

Conclusion

The Event Loop is one of the most important concepts in JavaScript because it enables asynchronous programming.

As you know, JavaScript works on a single thread. The Event loop allows it to handle multiple operations without blocking the main thread.