2Minutes: Microtasks In JavaScript

What are Microtasks in JavaScript?

Promise callbacks (.then(), .catch(), and .finally()), continuations after await, MutationObserver callbacks, and functions passed to queueMicrotask() are scheduled as microtasks.

Note: In Node.js, process.nextTick() uses a separate queue that runs even before the Promise microtask queue.

What are Microtask Queue?

The Microtask Queue stores microtasks that should run immediately after the current synchronous code finishes, before the event loop processes the next macrotask.

console.log("First");

async function getData() {
  const res = await fetch("/api"); // Async function pauses here

  console.log("Response received"); // This is the last to log
}

getData();

console.log("Second");

console.log("First");

async function getData() {
  const res = await fetch("/api"); // Async function pauses here

  console.log("Response received"); // This is the last to log
}

getData();

console.log("Second");

‘Response received’ is the last log because getData() pauses at await fetch(). Once the Promise resolves, the rest of the function is scheduled in the Microtask Queue, then moved back to the Call Stack for execution.

That’s 2Minutes, see you in the next one !

Sources

https://www.geeksforgeeks.org/javascript/what-is-the-call-stack-in-javascript

https://www.geeksforgeeks.org/javascript/implementation-queue-javascript