Skip to main content

What is an Event Loop? And How it Works

The event loop is a fundamental concept in JavaScript that enables asynchronous code execution. To fully understand how the event loop works, it's important to first understand the concepts of the call stack, the event queue, and the event loop itself.

The call stack​

The call stack is a data structure that keeps track of the function calls in a program. Whenever a function is called, it is added to the top of the call stack, and when the function returns, it is removed from the top of the stack. The call stack has a last-in, first-out (LIFO) structure, meaning that the most recently added function is the first one to be executed.

The Event Queue​

The event queue is a data structure that holds events that are waiting to be processed by the event loop. These events can be triggered by various sources, such as user input, network requests, or timer events. When an event is triggered, it is added to the end of the event queue.

  1. Task Queue (also known as the "macro task queue"): This queue contains the tasks that are added to the event loop using functions like setTimeout(), setInterval(), and requestAnimationFrame(). These tasks are processed in the order they were added to the queue.

  2. Microtask Queue (also known as the "job queue" or "Promise queue"): This queue contains microtasks that are added to the event loop using functions like Promise.resolve(), Promise.reject(), and queueMicrotask(). These microtasks have a higher priority than tasks in the Task Queue and are processed before the next task is executed.

  3. Animation Frame Queue: This queue is a specialized type of Task Queue that is used specifically for animation-related tasks. The requestAnimationFrame() function is used to add tasks to this queue, and they are processed before the next frame is rendered on the screen.

  4. Input Event Queue: This queue contains events related to user input, such as mouse clicks, keyboard events, and touch events. These events are added to the queue as they occur and are processed in the order they were received.

Event loop​

The event loop is a continuously running process that checks the call stack and the event queue for new events to process. Its main job is to wait for events to be added to the event queue and then execute the corresponding callback functions when the events are dequeued.

Working of event loop​

Here's a step-by-step breakdown of how the event loop works:

  • When a JavaScript program starts running, the main function is added to the call stack and executed.

  • As the main function executes, it may call other functions, which are added to the top of the call stack and executed in turn.

  • If a function makes an asynchronous call, such as a network request, the JavaScript runtime delegates the task to another part of the system, such as the browser or Node.js runtime. The function itself is popped off the call stack, allowing other functions to continue executing.

  • When the asynchronous call is complete, a corresponding event is added to the event queue.

  • The event loop continually checks the call stack to see if it's empty. If the call stack is empty, it checks the event queue for any new events.

  • If there is an event waiting in the queue, the event loop dequeues the event and adds its callback function to the call stack.

  • The callback function is executed, and any functions it calls are added to the top of the call stack and executed in turn.

  • Once the callback function and any functions, it calls have completed execution, they are popped off the call stack.

  • The event loop continues checking the call stack and event queue, repeating steps 5-8 until there are no more events in the queue or the program is terminated.

In summary, the event loop is a critical part of JavaScript's asynchronous programming model. It allows JavaScript to handle non-blocking I/O operations and execute code in a responsive and efficient manner, without blocking the main thread of execution.