Understanding Event Loop in JavaScript

You might already be familiar with the concept that JavaScript operates on a single thread, and perhaps you’ve encountered the terms Call Stack and Event Queue. However, the functionality of JavaScript extends beyond this.

JavaScript has a runtime model based on an event loop. This event loop is responsible for executing code, collecting and processing events, and executing queued sub-tasks.

The event loop consists of several components, including the call stack, web APIs, and callback queue.

The Javascript Engine consists of two main components:

Memory Heap — The memory heap is where the memory allocation happens, all of our object variables are assigned here in a random manner.
Call Stack — The stack is where your function calls are stored.

Understanding the Call Stack

This represents the single thread provided for JavaScript code execution. Function calls form a stack of frames. It 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. It is a LIFO queue (Last In, First Out).

Understanding the Web APIs

Web APIs are APIs built into your web browser. These APIs allow you to use features you could not otherwise. Example of some web APIs are:

• DOM
• Ajax (Network requests)
• setTimeout()

Event Loop && Callback Queue

The callback queue is basically a storage. It is a place where JavaScript keeps “messages” it needs to process. Each of these messages are basically callback functions used with async functions, such as setTimeout, and also events triggered by users. For example, clicks and keyboard events.

When any of these async functions gets executed, or events happen, JavaScript will first send them to the call stack. From here, JavaScript will send each function or event to appropriate web API to handle it. Once the API does what it needs to do, it will send a message with associated callback function to the message queue.

These messages are stored in message queue until the call stack is empty. When the call stack gets empty the first message in the queue, callback, will be pushed to the call stack. Call stack will execute that callback, and the code it contains.

There is one important thing about message queue. The call stack follows the LIFO principle. This means that last function pushed to the call stack will be processed as the first one. Callback queue doesn’t follow this principle. In case of callback queue, it is the first message, or callback, that will be processed as the first.

Here need to mention that, just placing our function does not necessarily imply that the function will get executed. This function has to be pushed into the call stack for execution and here the event loop comes into the picture. The event loop waits for the function stack to be empty, once the call stack is empty this will push the first function from the event queue to the call stack, and in this way, the desired function will be called.

Thus event loop works in a cyclic manner, where it continually checks whether or not the call stack is empty. If it is empty, new functions are added from the event queue. If it is not, then the current function call is processed.

Must Read: https://vaishnavineema.medium.com/interview-questions-in-the-javascript-925a0e4b990b