Learn the ES8 syntax for writing asynchronous functions that read like synchronous code!

Async Await

The `async` keyword is used to write functions that handle asynchronous actions. We wrap our asynchronous logic inside a function prepended with the `async` keyword. Then, we invoke that function. 
```js
async function myFunc() {
  // Function body here
};

myFunc();
```
We'll be using `async` function declarations throughout this lesson, but we can also create `async` function expressions:
```js
const myFunc = async () => {
  // Function body here
};

myFunc();
```
`async` functions always return a promise. This means we can use traditional promise syntax, like `.then()` and `.catch` with our `async` functions. An `async` function will return in one of three ways:
+ If there's nothing returned from the function, it will return a promise with a resolved value of `undefined`. 
+ If there's a non-promise value returned from the function, it will return a promise resolved to that value.
+ If a promise is returned from the function, it will simply return that promise

```js
async function fivePromise() { 
  return 5;
}

fivePromise()
.then(resolvedValue => {
    console.log(resolvedValue);
  })  // Prints 5
``` 
In the example above, even though we return `5` inside the function body, what's actually returned when we invoke `fivePromise()` is a promise with a resolved value of `5`. 

Let's write an `async` function!

The async Keyword

When `.catch()` is used with a long promise chain, there is no indication of where in the chain the error was thrown. This can make debugging challenging. 

With `async...await`, we use `try...catch` statements for error handling. By using this syntax, not only are we able to handle errors in the same way we do with synchronous code, but we can also catch both synchronous and asynchronous errors. This makes for easier debugging!
```js
async function usingTryCatch() {
 try {
   let resolveValue = await asyncFunction('thing that will fail');
   let secondValue = await secondAsyncFunction(resolveValue);
 } catch (err) {
   // Catches any errors in the try block
   console.log(err);
 }
}

usingTryCatch();
```
Remember, since `async` functions return promises we can still use native promise's `.catch()` with an `async` function
```js
async function usingPromiseCatch() {
   let resolveValue = await asyncFunction('thing that will fail');
}

let rejectedPromise = usingPromiseCatch();
rejectedPromise.catch((rejectValue) => {
console.log(rejectValue);
})
```
This is sometimes used in the global scope to catch final errors in complex code.


Handling Errors

We've seen that the `await` keyword halts the execution of an `async` function until a promise is no longer pending. Don't forget the `await` keyword! It may seem obvious, but this can be a tricky mistake to catch because our function will still run&mdash; it just won't have the desired results. 

We're going to explore this using the following function, which returns a promise that resolves to `'Yay, I resolved!'` after a 1 second delay:
```js
let myPromise = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Yay, I resolved!')
    }, 1000);
  });
}
```
Now we'll write two `async` functions which invoke `myPromise()`:
```js
async function noAwait() {
 let value = myPromise();
 console.log(value);
}

async function yesAwait() {
 let value = await myPromise();
 console.log(value);
}

noAwait(); // Prints: Promise { <pending> }
yesAwait(); // Prints: Yay, I resolved!
```
In the first `async` function, `noAwait()`, we left off the `await` keyword before `myPromise()`. In the second, `yesAwait()`, we included it. The `noAwait()` function logs `Promise { <pending> }` to the console. Without the `await` keyword, the function execution wasn't paused. The `console.log()` on the following line was executed before the promise had resolved. 

Remember that the `await` operator returns the resolved value of a promise. When used properly in `yesAwait()`, the variable `value` was assigned the resolved value of the `myPromise()` promise, whereas in `noAwait()`, `value` was assigned the promise object itself.

Writing async Functions

The true beauty of `async...await` is when we have a series of asynchronous actions which depend on one another. For example, we may make a network request based on a query to a database. In that case, we would need to wait to make the network request until we had the results from the database. With native promise syntax, we use a chain of `.then()` functions making sure to return correctly each one:
```js
function nativePromiseVersion() {
  returnsFirstPromise()
    .then((firstValue) => {
      console.log(firstValue);
      return returnsSecondPromise(firstValue);
    })
   .then((secondValue) => {
      console.log(secondValue);
    });
}
```
Let's break down what's happening in the `nativePromiseVersion()` function:
+ Within our function we use two functions which return promises: `returnsFirstPromise()` and `returnsSecondPromise()`. 
+ We invoke `returnsFirstPromise()` and ensure that the first promise resolved by using `.then()`. 
+ In the callback of our first `.then()`, we log the resolved value of the first promise, `firstValue`, and then return `returnsSecondPromise(firstValue)`.
+ We use another `.then()` to print the second promise's resolved value to the console. 

Here's how we'd write an `async` function to accomplish the same thing:
```js
async function asyncAwaitVersion() {
  let firstValue = await returnsFirstPromise();
  console.log(firstValue);
  let secondValue = await returnsSecondPromise(firstValue);
  console.log(secondValue);
}
```
Let's break down what's happening in our `asyncAwaitVersion()` function: 
+ We mark our function as `async`. 
+ Inside our function, we create a variable `firstValue` assigned `await returnsFirstPromise()`. This means `firstValue` is assigned the resolved value of the awaited promise. 
+ Next, we log `firstValue` to the console.
+ Then, we create a variable `secondValue` assigned to `await returnsSecondPromise(firstValue)`. Therefore, `secondValue` is assigned this promise's resolved value. 
+ Finally, we log `secondValue` to the console.

Though using the `async...await` syntax can save us some typing, the length reduction isn't the main point. Given the two versions of the function, the `async...await` version more closely resembles synchronous code, which helps developers maintain and debug their code. The `async...await` syntax also makes it easy to store and refer to resolved values from promises further back in our chain which is a much more difficult task with native promise syntax. Let's create some `async` functions with multiple `await` statements!

Handling Dependent Promises

Often in web development, we need to handle asynchronous actions&mdash; actions we can wait on while moving on to other tasks. We make requests to networks, databases, or any number of similar operations. JavaScript is non-blocking: instead of stopping the execution of code while it waits, JavaScript uses an <a href="https://youtu.be/8aGhZQkoFbQ" target="_blank" rel="noopener noreferer"> event-loop</a> which allows it to efficiently execute other tasks while it awaits the completion of these asynchronous actions.

Originally, JavaScript used callback functions to handle asynchronous actions. The problem with callbacks is that they encourage complexly nested code which quickly becomes difficult to read, debug, and scale. With ES6, JavaScript integrated native <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" target="_blank" rel="noopener noreferer">promises</a> which allow us to write significantly more readable code. JavaScript is continually improving, and [ES8](https://en.wikipedia.org/wiki/ECMAScript#8th_Edition_-_ECMAScript_2017) provides a new syntax for handling our asynchronous action, _`async...await`_. The `async...await` syntax allows us to write asynchronous code that reads similarly to traditional synchronous, imperative programs. 

The `async...await` syntax is <a href="https://en.wikipedia.org/wiki/Syntactic_sugar" target="_blank" rel="noopener noreferer">syntactic sugar</a>&mdash; it doesn't introduce new functionality into the language, but rather introduces a new syntax for using promises and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator" target="_blank" rel="noopener noreferer">generators</a>. Both of these were already built in to the language. Despite this, `async...await` powerfully improves the readability and scalability of our code. Let's learn how to use it!


Introduction

Another way to take advantage of concurrency when we have multiple promises which can be executed simultaneously is to `await` a `Promise.all()`. 

We can pass an array of promises as the argument to `Promise.all()`, and it will return a single promise. This promise will resolve when all of the promises in the argument array have resolved. This promise's resolve value will be an array containing the resolved values of each promise from the argument array. 

```js
async function asyncPromAll() {
  const resultArray = await Promise.all([asyncTask1(), asyncTask2(), asyncTask3(), asyncTask4()]);
  for (let i = 0; i<resultArray.length; i++){
    console.log(resultArray[i]); 
  }
}
```
In our above example, we `await` the resolution of a `Promise.all()`. This `Promise.all()` was invoked with an argument array containing four promises (returned from required-in functions). Next, we loop through our `resultArray`, and log each item to the console. The first element in `resultArray` is the resolved value of the `asyncTask1()` promise, the second is the value of the `asyncTask2()` promise, and so on. 

`Promise.all()` allows us to take advantage of asynchronicity&mdash; each of the four asynchronous tasks can process concurrently. `Promise.all()` also has the benefit of _failing fast_, meaning it won't wait for the rest of the asynchronous actions to complete once any one has rejected. As soon as the first promise in the array rejects, the promise returned from `Promise.all()` will reject with that reason. As it was when working with native promises, `Promise.all()` is a good choice if multiple asynchronous tasks are all required, but none must wait for any other before executing. 

Await Promise.all()

Remember that `await` halts the execution of our `async` function. This allows us to conveniently write synchronous-style code to handle dependent promises. But what if our `async` function contains multiple promises which are not dependent on the results of one another to execute? 

```js
async function waiting() {
 const firstValue = await firstAsyncThing();
 const secondValue = await secondAsyncThing();
 console.log(firstValue, secondValue);
}

async function concurrent() {
 const firstPromise = firstAsyncThing();
 const secondPromise = secondAsyncThing();
console.log(await firstPromise, await secondPromise);
}
```
In the `waiting()` function, we pause our function until the first promise resolves, then we construct the second promise. Once that resolves, we print both resolved values to the console. 

In our `concurrent()` function, both promises are constructed without using `await`. We then `await` each of their resolutions to print them to the console. 

With our `concurrent()` function both promises' asynchronous operations can be run simultaneously. If possible, we want to get started on each asynchronous operation as soon as possible! Within our `async` functions we should still take advantage of _concurrency_, the ability to perform asynchronous actions at the same time. 

Note: if we have multiple truly independent promises that we would like to execute fully in parallel, we must use individual `.then()` functions and avoid halting our execution with `await`.  

Handling Independent Promises

In the last exercise, we covered the `async` keyword. By itself, it doesn't do much; `async` functions are almost always used with the additional keyword `await` inside the function body. 

The `await` keyword can only be used inside an `async` function. `await` is an operator: it returns the resolved value of a promise. Since promises resolve in an indeterminate amount of time, `await` halts, or pauses, the execution of our `async` function until a given promise is resolved. 

In most situations, we're dealing with promises that were returned from functions. Generally, these functions are through a library, and, in this lesson, we'll be providing them. We can `await` the resolution of the promise it returns inside an `async` function. In the example below, `myPromise()` is a function that returns a promise which will resolve to the string `"I am resolved now!"`.

```js
async function asyncFuncExample(){
  let resolvedValue = await myPromise();
  console.log(resolvedValue);
}

asyncFuncExample(); // Prints: I am resolved now!
```
Within our `async` function, `asyncFuncExample()`, we use `await` to halt our execution until `myPromise()` is resolved and assign its resolved value to the variable `resolvedValue`. Then we log `resolvedValue` to the console. We're able to handle the logic for a promise in a way that reads like synchronous code. 

The await Operator

Awesome work getting the hang of the `async...await` syntax! Let's review what you've learned:

+ `async...await` is syntactic sugar built on native JavaScript promises and generators.
+ We declare an async function with the keyword `async`.
+ Inside an `async` function we use the `await` operator to pause execution of our function until an asynchronous action completes and the awaited promise is no longer pending .
+ `await` returns the resolved value of the awaited promise.
+ We can write multiple `await` statements to produce code that reads like synchronous code.
+ We use `try...catch` statements within our `async` functions for error handling.
+ We should still take advantage of concurrency by writing `async` functions that allow asynchronous actions to happen in concurrently whenever possible.
