Ever wondered how JavaScript knows when to run your .then() block? Or why your console.log("done") appear before a resolved promise result? Let’s break it down in this quick TidBit!

What is a Promise?

A Promise is JavaScript’s way of saying:

“I’ll give you a value… eventually!”

It’s a placeholder for a result that’s either:

• Fulfilled (Success)

• Rejected (Failure)

• Or still Pending

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data loaded!");
    }, 1000);
});

promise.then((data) => console.log(data));

When resolve("Data loaded!") is called, the .then() block waits to execute — but where does it go meanwhile?

What is an Event Loop?

JavaScript is single-threaded. That means it can do one thing at a time. So how does it handle waiting, timers, and promises without freezing the app?

Enter the Event Loop.

It’s like a traffic controller — coordinating between:

• Call Stack (where code runs)

• Web APIs (like setTimeout, DOM)

• Callback Queue

• Microtask Queue (where .then() of Promises go)

How Event Loop Manages Promises?

Let’s see the order of execution:

console.log("Start");
Promise.resolve("Resolved").then((msg) => console.log(msg));
console.log("End");

Output:

Start
End
Resolved

But, Why?

Here’s how it plays out:

• console.log("Start") ➝ runs immediately (Call Stack)

• Promise.resolve(...).then(...) ➝ .then() is scheduled (Microtask Queue)

• console.log("End") ➝ also runs immediately

• After the current stack is empty, Event Loop picks microtasks → .then() runs

This is why Resolved appears after End, even though the promise is already resolved!

Let’s spice it up with a setTimeout:

console.log("Start");

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

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

console.log("End");

Output:

Start
End
From Promise
From setTimeout

Here, Microtasks (Promises) are given priority over macrotasks (setTimeout, etc.).

Quick Recap

• Promises don’t run instantly — their .then() goes to the microtask queue.

• The Event Loop picks microtasks before other callbacks once the call stack is clear.

• Even a setTimeout(..., 0) will wait behind a resolved Promise!

So next time your Promise resolves “later,” remember — it’s not late. It’s just politely waiting its turn in the queue.

That’s all for now. This article was originally published on tapaScript.io. Thank you for your time reading through it.

Want to learn further?

Learn about Event Loop along with JavaScript Promises, Call Stack, Task Queue Visually.

Day 27: How Your Async Code Works | JavaScript Event Loop Simplified! 🤩 - In this session, we’ll learn about how JavaScript executes code internally. This session uses visualizations to demonstrate the working of Call Stack, Event Loop, Promises, Web APIs, and more. Let's learn.