Q28: Event Loop

[00:00:00]
>> What gets logged? Is that 1 2 3 4, 2 4 3 1, 2 3 4 1, or 2 3 1 4? All right, so right answer here is C. So again, we just have the Call Stack, Web API, all the fun stuff.

[00:00:18]
So first, we call settimeout, and its callback gets pushed to the Web API first to eventually log (1). Then we meet this async function body and we immediately invoke it. So because we immediately invoke it, it gets added to the Call Stack. Now the body of an async function is run synchronously until it meets an await keyword.

[00:00:38]
So here we're in the body and we see console.log(2). This just gets run so it logs(2). Then it sees the await keyword, but first, it resolves the promise. Anytime we await something, it'll first run that function that comes after. So this runs Promise.resolve, doesn't do anything else, and then it sees the await keyword.

[00:00:58]
And when it does this, it schedules the rest of the function body as a microtask. So in this case that's just console.log (3). I mean, yeah, this is where's animated, so this now gets pushed to the microtask queue, and then it changes out of that body or the function where it was before back to the global scope because this is now kind of suspended.

[00:01:18]
Now it calls promise.resolve and this just resolves. Calls then on that resolved promise, that promise resolved returned, and the callback from then gets added to the microtask queue. Now there's nothing in the Call Stack anymore. There's nothing to execute. So it first goes back to the microtask queue because those are prioritized.

[00:01:40]
And here, we have that console.log(3) from that async function. So now finally 3 gets logged, and then we have another microtask. And that's just a callback function for promise resolve. This runs, finishes, it calls the then function on the resolve promise, and this schedules its callback, which is the console.log(4) to the microtask queue.

[00:02:01]
Then we have this microtask here again cuz a microtask can schedule a microtask, fun. So this callback is console.log, it invokes console.log and then logs 4. And then finally, we just have one task left on the normal task queue, which is console.log1, and 1 gets logged. Wrong animation there.

[00:02:23]
[LAUGH] All right, makes sense? So yeah, I guess the most important part is that the async function body runs synchronously until it meets the await keyword, and the rest of the function body is run as a microtask