![Cover image for JavaScript Execution Context: A Deep Dive](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F74e0u2bnk8lhinmtuxir.png)
Real Life Example Of Execution Context
Suppose you're the manager of a restaurant, and your restaurant is like a JavaScript program. Eac...
For further actions, you may consider blocking this person and/or reporting abuse
I enjoyed this, nice style and layout good description.
What about async / await and settler operations and how they get handled?
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.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.async
function starts, logging"Async function started"
.await
pauses theasync
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
andawait
):Microtasks execute in the order they were queued:
console.log("Async function resolved")
is logged.Promise.resolve().then()
logs "Promise resolved".3. Macrotask Queue (
setTimeout
):Finally, the
callback
fromsetTimeout
executes, logging"setTimeout callback"
.Output
Key Takeaways:
await
and.then
) are handled right after the current execution context finishes, before any macrotasks.setTimeout
) are executed only after all microtasks are completed.Promises
,async/await
) always run before macrotasks (setTimeout
, etc.).There is a mistake in the output above. Correct output is:
Async function resolved
is logged beforePromise 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 beforeconsole.log("Promise resolved")
.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:
The key point is that after the
await
, the async function continues its execution as a microtask, which is processed before other microtasks likePromise.resolve().then()
.So,
Async function resolved
comes beforePromise resolved
.Hope this clears up the confusion!
After going through this article, no other blogs/article required, nice job, well explained and that so in such a great way.
I appreciate ur feedback! thank u so much!
I was looking to prepare for interview. So i found it. well explained and now concepts get cleared. Thanks man
I'm really glad you found it helpful! Wishing you all the best in your interview prep.
Nice Explaination
thank u for your support
Awesome man, I love your explanation, for me it was super clear, huge thanks!!
Yay, I’m so glad you found it helpful! 🎉
A great article indeed. Really appreciate the efforts 🙌
Thanks a lot! Glad you liked it! 🙌