DEV Community

Cover image for JavaScript Execution Context: A Deep Dive

JavaScript Execution Context: A Deep Dive

MD. JAHID HOSSAIN on March 09, 2023

Real Life Example Of Execution Context Suppose you're the manager of a restaurant, and your restaurant is like a JavaScript program. Eac...
Collapse
 
richard_bell profile image
Richard Bell

I enjoyed this, nice style and layout good description.

What about async / await and settler operations and how they get handled?

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN • Edited

Async/Await uses the Microtask Queue, so await pauses the function, and the promise resolves before any macrotasks like setTimeout. On the other hand, setTimeout callbacks go into the Macrotask Queue, which runs after all microtasks are completed.

console.log("Start");

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

(async function () {
  console.log("Async function started");
  await Promise.resolve();
  console.log("Async function resolved");
})();

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

console.log("End");
Enter fullscreen mode Exit fullscreen mode

Explanation:

1. Synchronous Execution Starts:

  • console.log("Start") logs "Start".
  • setTimeout registers its callback and adds it to the Macrotask Queue for execution after all synchronous and microtasks are complete.
  • The async function starts, logging "Async function started".
  • The await pauses the async function, and the promise is added to the Microtask Queue.
  • Promise.resolve().then is added to the Microtask Queue.
  • console.log("End") logs "End".

2. Microtask Queue (Promises and await):

Microtasks execute in the order they were queued:

  • First, console.log("Async function resolved") is logged.
  • Then, Promise.resolve().then() logs "Promise resolved".

3. Macrotask Queue (setTimeout):

Finally, the callback from setTimeout executes, logging "setTimeout callback".

Output

Start
Async function started
End
Async function resolved
Promise resolved
setTimeout callback
Enter fullscreen mode Exit fullscreen mode

Key Takeaways:

  • Synchronous code executes immediately.
  • Microtasks (like await and .then) are handled right after the current execution context finishes, before any macrotasks.
  • Macrotasks (like setTimeout) are executed only after all microtasks are completed.
  • This flow ensures that microtasks (Promises, async/await) always run before macrotasks (setTimeout, etc.).
Collapse
 
alexmarkop profile image
Alexios Markopoulos

There is a mistake in the output above. Correct output is:

Start
Async function started
End
Async function resolved
Promise resolved
setTimeout callback
Enter fullscreen mode Exit fullscreen mode

Async function resolved is logged before Promise resolved.

That happens because, inside the async function, the code before the "await" runs synchronously, and the code after "await" is pushed into the Microtasks queue (as if being in a "then" of a promise).

Therefore, console.log("Async function resolved") is added to the Microtasks queue before console.log("Promise resolved").

Thread Thread
 
jahid6597 profile image
MD. JAHID HOSSAIN

Thanks for your comment, @alexmarkop
I’ve made the edit based on further review.

Just a quick clarification: after reviewing the behavior of async/await and the event loop, it turns out that the correct order of logs is:

Start
Async function started
End
Async function resolved
Promise resolved
setTimeout callback
Enter fullscreen mode Exit fullscreen mode

The key point is that after the await, the async function continues its execution as a microtask, which is processed before other microtasks like Promise.resolve().then().

So, Async function resolved comes before Promise resolved.

Hope this clears up the confusion!

Collapse
 
nageshwebdev profile image
Nagesh Singh

After going through this article, no other blogs/article required, nice job, well explained and that so in such a great way.

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

I appreciate ur feedback! thank u so much!

Collapse
 
majidali129 profile image
Majid Ali

I was looking to prepare for interview. So i found it. well explained and now concepts get cleared. Thanks man

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

I'm really glad you found it helpful! Wishing you all the best in your interview prep.

Collapse
 
sayalikukkar profile image
Sayali Kukkar

Nice Explaination

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

thank u for your support

Collapse
 
eliaspereyra profile image
Elías Pereyra

Awesome man, I love your explanation, for me it was super clear, huge thanks!!

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

Yay, I’m so glad you found it helpful! 🎉

Collapse
 
sauravrajleaf profile image
SAURAV RAJ

A great article indeed. Really appreciate the efforts 🙌

Collapse
 
jahid6597 profile image
MD. JAHID HOSSAIN

Thanks a lot! Glad you liked it! 🙌