practise2:

Vishal PandeyVishal Pandey
3 min read
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 microtask

  • Logs: 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 CodePhaseOutput
console.log("1")Sync1
console.log("2")Sync (in Promise executor)2
resolve("3")Sync- schedules .then()
console.log("4")Sync4
.then(...).Sync- adds to microtask queue
console.log("7")Sync7
console.log("5")Microtask5
console.log(res)3Microtask3
console.log("6")Microtask6

🎯 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:

  1. The Promise constructor is invoked:

    • The executor function runs immediately.

    • resolve("3") is called before the .then() is attached.

  2. 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").

  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

StepActionQueue or State
1console.log("2")Printed immediately
2resolve("3")Promise becomes fulfilled
3console.log("4")Printed immediately
4.then(callback)Callback is added to microtask queue
5console.log("7")Printed immediately
6Microtasks 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?

0
Subscribe to my newsletter

Read articles from Vishal Pandey directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Vishal Pandey
Vishal Pandey