Understanding the JavaScript Event Loop 🚀

Event Loop is another important concept in JavaScript that often comes up in technical interviews

JavaScript is single-threaded, meaning it can only perform one task at a time. This might make you wonder how JavaScript handles asynchronous operations like fetching data from an API, setTimeout, or event listeners. The magic lies in the Event Loop!

Let's delve a bit deeper into the components and behavior of the event loop

How the Event Loop Works

• Call Stack :

The call stack is where JavaScript keeps track of function execution. When a function is called, it gets pushed onto the stack. When the function completes, it is popped off the stack.

• Web APIs :

Certain operations, like asynchronous network requests (XHR, fetch), timers (setTimeout, setInterval), and DOM events, are handled by the browser's Web APIs. When such an operation completes, the Web API pushes a callback function to the task queue.

• Task Queue (Callback Queue) :

The task queue holds the callback functions that are ready to be executed. This includes callbacks from Web APIs and promises that have been resolved.

• Event Loop :

The event loop constantly monitors the call stack and the task queue. If the call stack is empty, the event loop pushes the first task from the task queue onto the call stack, allowing it to be executed. This process ensures that tasks are executed in a non-blocking manner, allowing the JavaScript engine to perform other operations while waiting for asynchronous operations to complete.

Example of Event Loop

Let's understand Event Loop with help of an Example.

console.log('Start');

setTimeout(() => {
    console.log('Timeout callback');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise callback');
});

console.log('End');

Execution Steps:

• Call Stack :

1. console.log('Start') is called and logs "Start".

2. setTimeout is called, which sets up a timer in the Web API and registers a callback to be executed after 0 milliseconds.

3. Promise.resolve().then is called, which registers a callback to be executed when the promise resolves.

4. console.log('End') is called and logs "End".

• Web API :

The timer for setTimeout completes almost immediately (after 0 milliseconds) and its callback is pushed to the task queue.

• Microtask Queue :

The "then" callback from the promise is pushed to the microtask queue.

• Event Loop:

1. The call stack is empty after executing the synchronous code.

2. The event loop first processes the microtask queue before the task queue. Therefore, the promise callback is executed and logs "Promise callback".

3. Then, the event loop processes the task queue. The setTimeout callback is executed and logs "Timeout callback".

Output

Start
End
Promise callback
Timeout callback

Key Points

• Microtask Queue: This queue includes tasks such as resolved promise callbacks and process.nextTick in Node.js. It has higher priority than the task queue.

• Task Queue: This queue includes tasks such as setTimeout, setInterval, and other callback functions. It is processed after the microtask queue.

Conclusion

The event loop enables JavaScript to handle asynchronous operations in a non-blocking manner, ensuring smooth execution of code without interruptions. Understanding the event loop is crucial for writing efficient and effective JavaScript code, especially when dealing with asynchronous operations.

So, next time you're working with JavaScript, remember the Event Loop and its role in asynchronous operations!

Want to learn about Web Development, Follow Shahab Malik 😀