Q243: What is the event queue - JavaScript Internals (521 Qs)

The event queue follows the queue data structure. It stores async callbacks to be added to the call stack. It is also known as the Callback Queue or Macrotask Queue.

Whenever the call stack receives an async function, it is moved into the Web API. Based on the function, Web API executes it and awaits the result. Once it is finished, it moves the callback into the event queue (the callback of a promise is moved into the microtask queue).

The event loop constantly checks whether or not the call stack is empty. Once the call stack is empty and there is a callback in the event queue, the event loop moves the callback into the call stack. But if there is a callback in the microtask queue as well, it is moved first. The microtask queue has a higher priority than the event queue.

Practical Code Example

javascript

// Event Queue (Task Queue): Holds messages/callbacks from completed asynchronous APIs
// (such as DOM events, AJAX responses, and timers) waiting to be executed by the Event Loop:
button.addEventListener('click', () => {
  // Pushed to Event Queue when user clicks, dequeued when stack clears
  console.log('Button click callback executed from Event Queue');
});