practise2:

console.log("1");
const promise = new Promise((resolve,reject)=>{
console.log("2");
resolve("3")
console.log("4")
})
promise.then((res)=>{
console.log("5")
console.log(res);
console.log("6")
})
console.log("7")
🔄 Step-by-Step Execution Flow
1. console.log("1")
- Synchronous → logs:
1
2. Creating the Promise
const promise = new Promise((resolve, reject) => {
console.log("2");
resolve("3");
console.log("4");
});
Enters the executor function of the Promise immediately
Logs:
2
Calls
resolve("3")
— this doesn't execute.then()
immediately, it schedules it as a microtaskLogs:
4
🔸 At this point, the Promise is resolved, but the
.then()
callback is waiting in the microtask queue.
3. Register .then()
promise.then((res) => {
console.log("5");
console.log(res);
console.log("6");
});
.then()
is added to the microtask queue
4. console.log("7")
- Synchronous → logs:
7
🕳️ Microtask Queue Executes
Now that all synchronous code is done, JavaScript checks the microtask queue (which has the .then()
callback).
Logs:
5
Logs:
3
(this is the resolved value)Logs:
6
🧾 Final Output: 2 4 7 5 3 6
🧠 Why This Order?
Line of Code | Phase | Output |
console.log("1") | Sync | 1 |
console.log("2") | Sync (in Promise executor) | 2 |
resolve("3") | Sync | - schedules .then() |
console.log("4") | Sync | 4 |
.then(...). | Sync | - adds to microtask queue |
console.log("7") | Sync | 7 |
console.log("5") | Microtask | 5 |
console.log(res) → 3 | Microtask | 3 |
console.log("6") | Microtask | 6 |
🎯 Key Concept: .then()
Does Not Exist Yet When You Call resolve("3")
That’s right — here's how this unfolds internally:
🔹 Step-by-Step Breakdown:
The Promise constructor is invoked:
The executor function runs immediately.
resolve("3")
is called before the.then()
is attached.
What happens internally when
resolve("3")
is called?The Promise transitions to a "fulfilled" state.
At this point, no
.then()
callback is registered yet.So the Promise simply remembers the value (
"3"
).
Later,
.then()
is attached:The
.then()
method checks: "Is the Promise already fulfilled?"Yes → it queues the callback immediately in the microtask queue (not immediately executed, just queued).
🧠 So, Where Is the .then()
at the Moment of resolve()
?
✅ Answer: Nowhere yet.
It hasn’t been registered.
The
resolve()
function just fulfills the Promise and stores the value.Once the synchronous code completes and the
.then()
is actually called, the JS engine checks the fulfilled Promise, grabs its value, and queues the.then()
callback in the microtask queue.
📦 Think of It Like This:
🔐
resolve("3")
locks in the result.🗃
.then(callback)
later checks: “Oh, you already have the result? Cool, I’ll queue myself with that.”🚚 Then the engine queues the callback with the value.
🔄 Visual Timeline
Step | Action | Queue or State |
1 | console.log("2") | Printed immediately |
2 | resolve("3") | Promise becomes fulfilled |
3 | console.log("4") | Printed immediately |
4 | .then(callback) | Callback is added to microtask queue |
5 | console.log("7") | Printed immediately |
6 | Microtasks run | .then() logs 5 → 3 → 6 |
🧪 Summary
.then()
is only added to the microtask queue after it’s called.resolve()
doesn’t know or care about.then()
— it just sets the internal state.When
.then()
is later attached, and it sees the promise is fulfilled, it schedules the callback right away (as a microtask).
Would you like a visual diagram showing this timing with stack and queues?
Subscribe to my newsletter
Read articles from Vishal Pandey directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
