Day 25 of 30 of JavaScript

Hey reader👋 Hope you are doing well😊
In the last post we have talked about Async/Await. In this post we are going to discuss about Event Loop.
So let's get started🔥

Event Loop in JavaScript

The event loop is a fundamental concept in JavaScript, especially in the context of asynchronous programming. It is responsible for handling and coordinating the execution of multiple operations in a non-blocking manner.
We know that JavaScript is single threaded language i.e. it can handle only one task at a time. Then how asynchronous programming works or JavaScript can handle multiple tasks at a time without blocking. To answer this event loop comes into picture.

Basic Terminologies

Call Stack

The call stack is a data structure that keeps track of function calls. When a function is called, it gets added to the call stack. When the function returns, it is removed from the call stack.

Here in call stack the methods are stored in the order of their execution.

Web APIs

Web APIs (like setTimeout, DOM events, and AJAX calls) are provided by the browser (or the Node.js runtime) and allow asynchronous operations. When an asynchronous operation is invoked, it is handled by the Web API, which then delegates the task to the background (e.g., timers, network requests).

Callback Queue

Once an asynchronous operation is completed, its callback function is placed in the callback queue (or task queue). The callback queue is a list of functions that are waiting to be executed.

So here the callback provided in seTimeout is to be executed after 3 seconds for that time being this callback functin is stored in callback queue.

Working of Event Loop

The event loop checks in call stack first for any methods to be executed if the call stack is not empty then the methods in call stack are executed first. If the call stack is empty (i.e., there is no code currently being executed), the event loop takes the first callback from the callback queue and pushes it onto the call stack, allowing it to be executed. This process ensures that the asynchronous callbacks are executed in the order they were placed in the queue, but only when the call stack is empty.

Here console.log("Start") and console.log("End") are synchronous operations and setTimeout is asynchronous and a Web API.
The first line goes into the stack and is executed and removed from stack. The second line goes into stack when stack see it is an asynchronous function. The browser sets a timer for 2 seconds and the callback is sent to the Web API. Then the third function call is stored in stack and is executed. After 2 seconds, the timer completes, and the callback (() => { console.log("Timer finished"); }) is placed in the callback queue. The event loop sees that the call stack is empty and takes the callback from the callback queue, pushing it onto the call stack. The callback is executed, and "Timer finished" is printed.
So here you can see that how JavaScript being a single threaded language easily handles multiple tasks at a time.

I hope you have understood this blog well. Don't forget to follow me.
Thankyou 🩵