Understanding Micro Queue and Macro Queue in JavaScript

In JavaScript, the concepts of Micro Queue and Macro Queue (also known as the Task Queue) refer to different types of queues that manage the execution of asynchronous tasks. Understanding these queues helps clarify how the event loop processes different types of operations.

Macro Queue (Task Queue)

The Macro Queue contains tasks that are generally scheduled by APIs (like setTimeout, setInterval, or I/O operations). Tasks in this queue are executed one at a time in the order they were added. After all currently executing code has completed and any microtasks in the Micro Queue have been processed, the next task from the Macro Queue is executed.

Examples of tasks in the Macro Queue include:

• setTimeout
• setInterval
• I/O operations (e.g., file reading)
• Event handlers

Micro Queue (Job Queue)

The Micro Queue, on the other hand, is used for more granular operations that need to occur after the currently executing script but before the next task from the Macro Queue. This queue is processed immediately after the execution of the currently running script and before any tasks from the Macro Queue are executed.

Examples of operations in the Micro Queue include:

• Promises (Promise.then, Promise.catch, Promise.finally)
• Mutation Observers
• queueMicrotask()

Execution Order

When the JavaScript event loop runs, it follows this general order:

1. Execute the currently running code (main stack).
2. Process all tasks in the Micro Queue.
3. If there are no more microtasks, process the next task in the Macro Queue.
4. Repeat the process.

Summary

• Macro Queue: Contains tasks like setTimeout, setInterval, and I/O tasks; processed after the Micro Queue.
• Micro Queue: Contains promise callbacks and other high-priority tasks; processed immediately after the current execution context.

Problem 1

console.log("Start");

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

Promise.resolve().then(() => {
  console.log("Promise 1");
}).then(() => {
  console.log("Promise 2");
});

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

console.log("End");

/* 
Start
End
Promise 1
Promise 2
Timeout 1
Timeout 2
*/

Problem 2

function callbackExample(cb) {
  console.log("Callback Start");
  cb();
  console.log("Callback End");
}

console.log("Start");

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

  Promise.resolve().then(() => {
    console.log("Promise inside Timeout 1");
  });

  callbackExample(() => {
    console.log("Callback inside Timeout 1");
  });
}, 0);

Promise.resolve().then(() => {
  console.log("Promise 1");

  setTimeout(() => {
    console.log("Timeout inside Promise 1");

    callbackExample(() => {
      console.log("Callback inside Timeout from Promise 1");
    });
  }, 0);
  
}).then(() => {
  console.log("Promise 2");
});

setTimeout(() => {
  console.log("Timeout 2");

  callbackExample(() => {
    console.log("Callback inside Timeout 2");
  });

  Promise.resolve().then(() => {
    console.log("Promise inside Timeout 2");
  });
}, 0);

console.log("End");

/* 
Start
End
Promise 1
Promise 2
Timeout 1
Callback Start
Callback inside Timeout 1
Callback End
Promise inside Timeout 1
Timeout 2
Callback Start
Callback inside Timeout 2
Callback End
Promise inside Timeout 2
Timeout inside Promise 1
Callback Start
Callback inside Timeout from Promise 1
Callback End
*/

Problem 3

console.log('console1');

setTimeout(() => {
  console.log('setTimeout1');
  Promise.resolve().then(() => {
    console.log('Promise1');
  })
}, 0)

new Promise((resolve) => {
  console.log('Promise 1');
  setTimeout(() => {
    resolve('resolve 1')
  }, 0)
}).then((res) => {
  console.log('resolved 2');
  setTimeout(() => {
    console.log(res);
  }, 0)
})

/* 
console1
Promise 1
setTimeout1
Promise1
resolved 2
resolve 1
*/

Problem 4

console.log(1);

setTimeout(() => {
  console.log(3);
  Promise.resolve().then(() => console.log(4))
}, 0)

Promise.resolve().then(() => {
  console.log(5);
  setTimeout(() => {
    console.log(7);
  }, 0)
})

console.log(6);

/* 
1
6
5
3
4
7
*/

Problem 5

console.log("A");

setTimeout(() => console.log("B"), 0);

Promise.resolve()
  .then(() => console.log("C"))
  .then(() => console.log("D"));

console.log("E");
/* 
A
E
C
D
B
*/

Problem 6

setTimeout(() => console.log("1"), 0);

Promise.resolve().then(() => {
  console.log("2");
  setTimeout(() => console.log("3"), 0);
});

console.log("4");
/* 
4
2
1
3
 */

Problem 7

setTimeout(() => console.log("X"), 0);

Promise.resolve()
  .then(() => console.log("Y"))
  .then(() => {
    console.log("Z");
    setTimeout(() => console.log("W"), 0);
  });

console.log("Q");

/* 
Q
Y
Z
X
W
*/

Problem 8

setTimeout(() => {
  console.log("A");
  Promise.resolve().then(() => console.log("B"));
}, 0);

Promise.resolve().then(() => {
  console.log("C");
  setTimeout(() => console.log("D"), 0);
});

console.log("E");

/* 
E
C
A
B
D
*/

Problem 9

Promise.resolve()
  .then(() => {
    console.log("A");
    return Promise.resolve();
  })
  .then(() => {
    console.log("B");
    return Promise.resolve();
  })
  .then(() => console.log("C"));

setTimeout(() => console.log("D"), 0);

console.log("E");

/* 
E
A
B
C
D
 */