In that same previous example, we pulled information from an API, and it's realistic to wait until that call completes before doing something else with that information. We can't process user data if we don't have the user data in the first place. So let's dive into how async and await works. I'm going to create another function called getUserData. And this will return a new Promise. After, let's say, two seconds again. And like before, we'll return some user data. After that two seconds passes up,

And like before, we'll return some User data. After that two seconds passes up, we resolve with that User data. So now up here in our init() function, let's first output some data to the DOM. I want to keep a timeline going, so I'm going to start with zero, and that will be the start of when we fire off this init() function. In order to keep track of how much time passes, I'm going to create a constant,

In order to keep track of how much time passes, I'm going to create a constant, and it will be equal to date.now, which I believe gives us a value in milliseconds. So now because this is an async function, we can use the await keyword on a function that returns a promise, like our getUserData function. What's going to happen is that this now blocks execution of any code underneath of it until this promise resolves.

now blocks execution of any code underneath of it until this promise resolves. But the best part is that using await() will return back the data that's resolved in that promise we're waiting for. So we can say const user is equal to await getUserData(). We're basically using the then chaining from the previous video, but in a slightly more controlled way with a little bit of a cleaner syntax. And now we can do something with this user data.

with a little bit of a cleaner syntax. And now we can do something with this user data. So let's add it to the DOM. But I'd like to see how long that took, so we'll prefix this with the amount of milliseconds from the start. And then we just need to fire off this init() function when the script is loaded up. Alright, let's head to our browser and check this out. Alright, so at 0, init() started,

when it comes to using concurrency with await() and I'll show that now. So let's say we have another function that returns a promise. And for the sake of simplicity, this will just return a simple string. So we'll call it a welcomeString. And call a function called getWelcomeString(). And like the output above, we'll just dump that into the DOM. We'll output the amount of time it took and then just return back that welcomeString. So let's go ahead and create that function.

and see how this looks. You might be able to see the problem that we have. Both of these promises take 2 seconds to resolve. But our last one took 4 seconds to display from the start of the function. And that's because if we go back to the code, we are stopping execution at this line and waiting for that user to show up. And then only when it does do we continue on and we have to wait another 2 seconds for the welcome string to show up. So start, wait 2 seconds,

and we have to wait another 2 seconds for the welcome string to show up. So start, wait 2 seconds, then wait 2 seconds, then show it up. So there's 2 whole seconds that we're not even firing off this await. Well, so how do we run them concurrently? Instead of creating a constant for the await of the function whose promise we're resolving, we're instead going to create a constant for the user's promise itself. So we'll create one for getUserData and another for the welcome string.

So we'll create one for getUserData and another for the welcome string. So unlike this constant, which is holding the value that resolves back from the getUserData promise, these two up here are holding the actual promise from getUserData and getWelcomeString. And that causes both of these to fire off at the same time. Which means it should take both of them exactly 2 seconds from the start of the function to resolve. So now replacing await getUserData