Async vs Promise Quiz

[00:00:00]
>> Next, I'm gonna give you a moment to read through this code cuz it's a little bit more than what we had before. It's a bunch of console log statements that log out an animal name. And my question to you is, what is the order that we will see these things written to the console?

[00:00:16]
And just to clue you in, this is kind of the first line of code that's actually executed. So, I'll give you the first one it's dog, right? And then we're going to proceed forward. So just take a look at that, kind of follow it through and tell me what order you think we'll get.

[00:00:39]
Okay, so let's walk through this. We begin with dog and then we execute main, right? Well, first, let's look at the answer. So it's dog, cat, elephant, giraffe, zebra, koala, lion, and moose. And I see that there are some different answers in chat, which means this is a good question to walk through.

[00:01:07]
So, why this order? So first dog, right, that's pretty clear. That's the first line that we execute. And then we enter main. We go up here, and it's an async function, but we begin executing it immediately, right? So until we have something that is async, which is like this await down here, we're gonna go ahead and print cat console right away.

[00:01:36]
And then we're gonna go here and we're gonna invoke get data. That'll take us up here. Now this is what will cause elephant to get logged. So although this is an async function, we don't really create that promise and sort of put a pin in that code and come back to it later.

[00:01:55]
We don't do that until something a sync actually happens. So this is gonna be what's logged next elephant. And then we're going to invoke this promise, and this is a little bit of a tricky situation because we're passing this callback into our promise constructor. And there are two things that could happen.

[00:02:16]
And it depends on what promise does with this thing. If promise uses this function, we give it asynchronously, if it's a set timeout zero and then it calls the function. Well then, we could assume koala is what comes next but that's not what happens. The promise constructor invokes this function right away.

[00:02:36]
And this probably feels intuitive to you, we've all created a promise before. And you can kind of think of it as, this code is running and then inside the promise as we're setting it up this other stuff starts running, right away. So again nothing async happens yet, so that's why giraffe comes next.

[00:02:55]
Now here's something interesting we call resolve and what does that do that says. You can think of it like, this promise now becomes resolved. So we set resolved equals true somewhere. And we say, when someone attaches a .then, we will give them the value. So you can create an already resolved promise like promise.resolve6.

[00:03:21]
That'll give you a promise that as soon as you get a reference to it, it's already resolved. And if ten minutes later, you attach a .then at ten minutes and one second, you will get six, right? So you don't have to be listening to it at the moment it resolves to get that value.

[00:03:39]
It's sort of just holding that value and it's ready for anyone to ask. So all that happens here is we kind of queue this up. We say look, if anyone asks, lion is what we resolve to. So we go from giraffe we kind of queue this up but we don't do anything with it yet and then we proceed to zebra.

[00:04:00]
And finally this promise constructor it invokes this thing synchronously. And then we hit koala, so we get our reference to the promise p which at this point is resolved. But nobody even has access to it yet, right, we haven't returned it from the getData function. Surely no one's attached a .then to it yet.

[00:04:18]
So koala is logged next, we return the promise. That means that this getData function it has now returned, at which point we wait for it to resolve and it resolves immediately. Then we get the result and log it out. So that's where we get lion following koala. So why is this important?

[00:04:46]
This is a TypeScript class, why are we talking about promises there are no types here. Control Flow is important because that's how we narrow types. That's why when we have something that could be a couple of different values and we say, hey, if we go down this branch, if it's a number, we do this, if it's a string, we do that.

[00:05:06]
Well, it's important to know what's synchronous, what's async. What branch of code do we follow now versus what happens potentially much later after things are changed? That has ramifications on what the types of things will end up being. Whether something is defined or not. So we log out lion.

[00:05:30]
And then finally all of this wraps up, we finish invoking this main function. And then the stop then is called and the last thing we log is moose. And I see a lot of people missed koala in chat and that has to do with the synchronous invocation of the thing you pass to set up a new promise, important thing to know.