Macrotask and Microtask exercises

In JavaScript, understanding the order of execution is crucial for building reliable and predictable applications. The combination of event loop and promises plays a significant role in managing asynchronous code. In this blog, we will explore the execution order of a bunch of code snippets that include event listeners, timeouts, and promises. Try to reason out why each snippet is executing in the given order.

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("fifth"), 0);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    resolve("fourth");
  });
  prom.then((x) => console.log(x));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("fourth"), 0);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    setTimeout(() => resolve("fifth"), 0);
  });
  prom.then((x) => console.log(x));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => {
    console.log("fourth");
    setTimeout(() => console.log("sixth"));
  }, 0);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    setTimeout(() => resolve("fifth"), 0);
  });
  prom.then((x) => console.log(x));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("fifth"), 1000);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    setTimeout(() => resolve("fourth"), 0);
  });
  prom.then((x) => console.log(x));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("fourth"), 0);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    setTimeout(() => resolve("fifth"), 1000);
  });
  prom.then((x) => console.log(x));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("seventh"), 0);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    resolve("fourth");
  });
  prom
    .then((x) => {
      console.log(x);
      return "fifth";
    })
    .then((y) => {
      console.log(y);
      return "sixth";
    })
    .then((y) => console.log(y));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("fourth"), 1000);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    setTimeout(() => resolve("fifth"), 1000);
  });
  prom.then((x) => setTimeout(() => console.log(x), 1000));
  console.log("third");
});

document.querySelector("button").addEventListener("click", () => {
  console.log("first");
  setTimeout(() => console.log("seventh"), 0);
  let prom = new Promise((resolve, reject) => {
    console.log("second");
    resolve("fourth");
  });
  prom
    .then((x) => {
      console.log(x);
      setTimeout(() => {
        return "fifth";
      }, 1000);
    })
    .then((y) => {
      console.log(y);
      return "sixth";
    })
    .then((y) => console.log(y));
  console.log("third");
});

Did you get all correct? Comment down below

Please like it if you find it useful.