In-depth JS Runtime Environment: Microtask vs. Task

execution_sequence.js

console.log("Starting the program...");

setTimeout(() => {
  console.log("Task#1");

  setTimeout(() => console.log("task#2"));
});

queueMicrotask(() => {
  console.log("microtask#1");

  queueMicrotask(() => console.log("microtask#2"));
});

setTimeout(() => console.log("task#3"));

console.log("call stack is now empty!");

microtask_task.js

const doWork = () => {
  queueMicrotask(() => {
    console.log("microtask#1");
  });

  setTimeout(() => {
    console.log("task#1");
  }, 0);

  queueMicrotask(() => {
    console.log("microtask#2");
  });

  setTimeout(() => {
    console.log("task#2");
  }, 0);

  let result = 1;
  for (let i = 2; i <= 10; ++i) {
    result *= i;
  }
  return result;
};

console.log("Main thread running...");

queueMicrotask(() => {
  console.log("microtask#main");

  queueMicrotask(() => {
    console.log("microtask#main#children");
  });
});

setTimeout(() => {
  console.log("task#main");

  setTimeout(() => {
    console.log("task#main#children");
  });
}, 0);

console.log("10! is equal to: ", doWork());
console.log("Main thread is now empty...");

Output:

microtask_task.js

Main thread running...
10! is equal to:  3628800
Main thread is now empty...
microtask#main
microtask#1
microtask#2
microtask#main#children
task#main
task#1
task#2
task#main#children

execution_sequence.js

Starting the program...
call stack is now empty!
microtask#1
microtask#2
Task#1
task#3
task#2