JavaScript Promises Fundamentals Every Engineer Should Know | Part 2 | Event Loop | MicroTasks

In this video, we are going to continue talking about JavsScript Promises. We will look at Event Loop, Macro and Micro task queues, and how Promises fit into all this. We will also go through code examples that would give us a sneak peek into how task scheduling works and a lot more.

00:00 Introduction
00:45 What is Event Loop?
01:46 Why should I care about Event Loop?
03:40 What are the different task queues in the Event Loop?
10:15 Promise scheduling code example
12:22 Deep diving into the code example
16:38 Promise code example visualized
18:00 Question for the audience!
18:54 Outro

You can support our channel via:

**************************************************************
Devtools Tech is a YouTube channel started as a collaborative effort among like-minded engineers to provide high-quality programming tutorials for free. We firmly believe in knowledge sharing and easy access to quality content for everyone. Hence, this channel is an effort to give back to the community and a step toward our belief -- "We rise by lifting others".

Team Members:
Yomesh Gupta

#javascript #promises #asyncprogramming #frontend *************************************************************

[rishav.bharti]

Amazing explanation. Your content deserves a lot of publicity 🔥

[prashant.s.]

good stuff, i always confused with microtask queue now all clear.

[agrittiwari]

Kaida! Thank your for creating such good videos Yomesh.

[SoumikPradhan]

Your videos always let me refresh my js concepts. Thanks.

To answer your question, earlier the call() promises were getting resolved and the callbacks were enqueued to microtask q as they were getting executed. In setTimeout() variation, the promises will be resolved by setTimout's callback function which are enqueued to macrotask q once call stack becomes empty. Now that callstack is empty, event loop will dequeue one callback at a time from macrotask q (microtask q is empty) which in turn will enqueue new callbacks to the microtask q. Event loop won't dequeue the second setTimeout's callback until it processes the new added callbacks in microtask q and making it empty. This ends up printing 1 2 3 before 4 5 6 is printed.

[Sanjeeybajaj]

For this: return new Promise(reoslve => setTimeout(resolve, 0))

When exeuction goes over promise callback it finds setTimeout with 0 ms and put into callback queue
When callstack is empty then event js environment with help of event loop playes that callback into callstack
after resolve gets called and when promise get resolved

Now promise is resolved so the first then callback waiting for resolved promise gets executed and returns
another/new promise which in turn called second then callback and similary for third then callback

Now first set of promise and then are done, then same process gets repeated for another set of then

Previously it was alread resolved promise so call then callback immediately wihtout microtask queue but
then always returns a promise so code goes to next line in call stack and same process gets repeated.

[Sanjeeybajaj]

First Question: resolved promise + micro task queue
Second Question: unresolved promise + callback queue + micro task queue

[sujalgupta]

I understood the example, but want a clarification on somethings

So, there are three things main Call stack (where synchronous code runs), CallBackQueue(MacrotaskQueue), and microtaskQueue.

I want to understand the order that is being followed

first all the sync code => done, call stack is now empty, during this time macro and micro queues have got some tasks in them if any.


then what is the next order?

all microtask then -> one oldest macrotask-> then all microtasks-> and so on.

OR

one oldest macrotask => then all microtasks => one oldest macrotask => and so on.

I have spent so much hours on this, also read the mdn docs

[jayantsharma]

Thanks for this great video and explanation. My understanding is that when the promise gets resolved only then its callback pushed into the micrtask q. For ex -
const promise = new Promise(res => setTimeout(res, 100));
promise.then(function func(){ console.log('value resolved');});
func(resolved callback) will be pushed into the microtask queue after 100ms (in this case)
Is my understanding correct?

[abhirajkrishnan]

Both the call() function's resolve gets queued in Macrotask queue because of settimeout.First resolve() from macrotask gets executed, which returns promise that gets queued in microtask and which again returns promise and executes till microtask is empty due to which output is 1, 2, 3.Then the next resolve() from macrotask gets executed which again returns promise and all those promise gets executed till microtask is empty again for 4, 5, 6.
Hope I am able to explain it correctly 😅😂.