# JS Tip of the Day: Async Functions and await

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-async-functions-and-await/643147>\
**Category:** web dev\
**Created:** [March 20, 2020, 1:23pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-async-functions-and-await/643147 "2020-03-20T13:23:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 20, 2020, 1:23pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-async-functions-and-await/643147/1 "2020-03-20T13:23:07Z")

</div>

**Async Functions and await**  
Version: ES2017  
Level: Intermediate

Async (i.e. asynchronous) functions are a fairly new kind of function type in JavaScript that allow you to use the `await` operator. The `await` operator (which currently is _only_ available in async functions) is used to obtain the result of a promise, pausing the current execution context until the value of that promise is available. Once it is, the `await` expression resolves to that value and execution continues. Other code around the async function call is free to continue running when this pause happens which is exactly what makes async functions async.

To create an async function, include the `async` keyword before the function definition. They’re called just like any other function.

```javascript
async function getFlightStatus () {
    console.log('Starting to get status...');
    let flightStatus = await Promise.resolve('Delayed');
    console.log('Got status!');
    return flightStatus;
}

console.log('Before');
getFlightStatus();
console.log('After');
/* logs:
Before
Starting to get status...
After
Got status!
*/

```

Here, you can see that once the `await` in the `getFlightStatus()` function was reached, the function execution paused and code at its callsite continued to run. This is why the “After” log came before the “Got status!” log.

Because async functions can pause, they will always return a promise. This promise will resolve to the return value of the async function once the async function eventually returns.

```javascript
let result = getFlightStatus();
console.log(result instanceof Promise); // true
result.then(status => {
    console.log(status); // Delayed
});

```

Like normal functions, if an async function doesn’t have an explicit return, it will implicitly return `undefined`. In that case, when called it will return a promise which will resolve to `undefined`.

```javascript
async function getFlightRefund () {
    // does not return
}
getFlightRefund().then(refund => {
    console.log(refund); // undefined
});

```

Using `await` in async functions is a nice alternative to using the promise API. It lets you write asynchronous promise code much like you would write normal synchronous code. `await` itself replaces the use of `then()` while `try...catch...finally` blocks replace the use of `catch()` and `finally()` in promises.

```javascript
let somePromise = Promise.resolve('I promise');

async function awaitPromise () {
    try {
        let promiseValue = await somePromise;
        console.log(promiseValue); // I promise
    } catch (error) {
        console.error(error.message);
    } finally {
        console.log('Done awaiting promise');
    }
}

awaitPromise();

```

This is basically the same as

```javascript
let somePromise = Promise.resolve('I promise');

somePromise.then(promiseValue => {
    console.log(promiseValue); // I promise
}).catch(error => {
    console.error(error.message);
}).finally(() => {
    console.log('Done awaiting promise');
});

```

While you can currently only use `await` inside async function, there is a stage 3 proposal for using `await` in the top level scopes in modules. This would mean in the future, you could await promises without having to wrap them in an async function first (assuming you’re in a module).

More info:

- [async functions on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)
- [await on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
- [Promise on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [Top level await (stage 3) proposal](https://github.com/tc39/proposal-top-level-await)

---

<div class="post-metadata">

**Author:** ![Vigus](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vigus/32/11089_2.png) [@Vigus](https://forum.kirupa.com/u/Vigus)\
**Post date:** [March 23, 2020, 3:32am UTC](https://forum.kirupa.com/t/js-tip-of-the-day-async-functions-and-await/643147/2 "2020-03-23T03:32:42Z")

</div>

So the basic reason for introducing such functions are mainly an attempt to reduce the code size, nesting and hence the complexity? Just a better way to organise the code? Because they don’t seem to do anything new.  
I saw similar changes in coding methodology in Unity too while scripting with C#. It’s called IEnumerator, which is coupled with yield return. And that reduces the code which is otherwise difficult to read if replaced by event-listeners.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 23, 2020, 4:07am UTC](https://forum.kirupa.com/t/js-tip-of-the-day-async-functions-and-await/643147/3 "2020-03-23T04:07:14Z")

</div>

It’s true that they don’t necessarily add anything new. Complexity and organization are the real benefits. And with that, consistency in writing code, particularly in being able to write code that looks like synchronous code despite it being asynchronous, all thanks to the help of a couple of keywords (`async` and `await`) that helps us escape the promise API completely (most of the time).

Where this especially becomes helpful is allowing a promise chain to occur all in the same scope, especially as you might have dependencies scattered throughout would-be `then()` callbacks. For example:

```javascript
getUser()
    .then(user => {
        return user.getAccount();
    })
    .then(account => {
        // but now how do I access user?
    });
    
// vs

let user = await getUser();
let account = await user.getAccount();
// user and account in scope

```

If you’ve ever worked with async promise code in ES5, you may know the struggles. The lack of arrow functions in combination with the use of the promise API can make for some messy code (yes, [I had a bad experience](https://www.youtube.com/watch?v=A4_OJ2bciRc)).