The Secret Life of JavaScript: The Promise (Microtasks)

Understanding the VIP Line: Microtasks vs. Macrotasks.

---

Timothy sat at the small library table, shuffling two pieces of paper. He looked up as Margaret approached, a frown creasing his forehead.

"I don't get it," he said quietly. "I told the code to wait zero milliseconds. Zero. That should be instant, right?"

He slid a code snippet across the table.

console.log("1. Start");

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

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

console.log("4. End");

"I expected it to go 1, 2, 3, 4," Timothy explained. "Or maybe 1, 4, 2, 3. But look what actually happened."

1. Start
4. End
3. Promise
2. Timeout  <-- Why is this last?

"The Timeout was set to zero," Timothy said. "But the Promise cut in line. Why?"

Margaret smiled gently and sat down. "Do you remember when we talked about the Event Loop back in Volume 6? We said the Waiter checks the queue."

"Right," Timothy nodded.

"Well," Margaret whispered, "I didn't tell you the whole story. There isn't just one queue. There are two."

The VIP Rope

Margaret drew a large circle on the chalkboard and labeled it The Event Loop. Inside, she drew two separate boxes.

1. The Macrotask Queue: This is the standard line. It holds things like setTimeout, setInterval, and user interactions.
2. The Microtask Queue: This is the VIP line. It holds Promises, queueMicrotask, and MutationObserver.

The Rule of Priority

Margaret drew a star next to the Microtask Queue.

"The Engine has a strict rule," she explained. "When the current task (like your main script) finishes, the Waiter doesn't just grab the next Macrotask. First, he checks the VIP line."

"And if there are VIPs?" Timothy asked.

"He runs all of them," Margaret said. "He will not touch the Standard Line (Macrotasks) until the VIP line is completely empty."

Timothy looked at his code again.

1. Start/End: These run immediately on the Stack (The current task).
2. setTimeout: The engine puts this in the Macrotask Queue (Standard Line).
3. Promise: The engine puts this in the Microtask Queue (VIP Line).

"So when the main script finishes..." Timothy started.

"The waiter sees the Timeout in the Standard Line," Margaret finished. "But he sees the Promise in the VIP line. The VIPs always go first."

The Danger: Infinite VIPs

Margaret wiped a corner of the board. "This power comes with a risk. What happens if a VIP invites another VIP?"

She wrote a nested example:

Promise.resolve().then(() => {
    console.log("VIP 1");
    Promise.resolve().then(() => {
        console.log("VIP 2 (Nested)");
        // If we keep adding Promises here...
    });
});

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

"In this case," Margaret explained, "The 'VIP 2' gets added to the front of the line, before the Timeout. If you keep adding Microtasks, the Waiter will never get to the Standard Line."

Timothy's eyes widened. "The browser would freeze."

"Exactly. That is called Starvation," Margaret said. "That is why we use Promises for quick, urgent updates, but we don't abuse the privilege."

The Conclusion

Timothy took his paper back. He drew a small 'VIP' badge next to his Promise code.

"It's not about time," Timothy said. "It's about status."

"Precisely," Margaret smiled, standing up to leave. "In the world of JavaScript, a Promise is a solemn vow. It takes priority over a simple Timeout."

---

Aaron Rose is a software engineer and technology writer at tech-reader.blog and the author of Think Like a Genius.

Comments

[Bhavin Sheth]

This is such a clear way to explain something that usually confuses people. The “VIP line” analogy for microtasks vs macrotasks made the Promise vs setTimeout behavior click instantly. Super helpful for anyone trying to really understand the event loop beyond the basics.

[Aaron Rose]

🙏

[Marina Eremina]

Async JS is definitely a complicated topic, the VIP comparison was a great way to explain it, simple and memorable. Thanks for the article!