Async Heaven In JavaScript

Mappa dell’Inferno (Source: https://www.florenceinferno.com/the-map-of-hell/)

In the beginning was God, then JavaScript and with JavaScript came callback hell

JavaScript as a programming language has come a long way over the years. Something that started as a little project has gone to become the lingua franca of the web and also one of the most popular programming languages today.

Over the years, JavaScript as a language has seen tremendous improvement which has made the language more appealing to developers and in this post, we’ll be checking out one of the new features async/await that makes JavaScript an even more awesome language. But before that, a little backstory on why async/await is a big deal.

The popular “callback hell” problem in JavaScript comes from the need to delay computation so that a piece of code only runs after an asynchronous call is complete. An asynchronous call is a call that does not wait for a response from the server before running the next line of code.

Let’s imagine we want to take off to the moon but before we launch, we need confirmation from the command centre. Below is the code we need

How asynchronous code works in JavaScript

From the code above, we see that the function logs "we're sky high”to the console before we get any response from command centre. Obviously, this should not be, as command centre might not have granted us permission. To fix this we use callbacks, and the journey into the circles of the callbacks hell begins. According to MDN:

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

The problem with callbacks is that it gets confusing and harder to work with. The more nested code we have, the greater the probability of leaving a bug behind.

To battle this syntactic callback hell, JavaScript came with a promise to make async calls easier, it was called Promise. With Promises all we need to do is resolve or reject the result of an async call, then we can catch any error that follows.

Sweet right? Promises provide cleaner code, and chances for less bugs in our code but as we continue to use Promises for more complex async calls, it leads us to chaining Promise-Land.

Enter async/await

Finally, we can find async peace with async/await. According to MDN:

The purpose of async/await functions is to simplify the behaviour of using promises synchronously and to perform some behaviour on a group of Promises. Just as Promises are similar to structured callbacks, async/await is similar to combining generators and promises.

As we can see in the code above, we can make async calls without the problem of nesting and if we want to make subsequent async calls, we can do that without chaining .then or callbacks, and to catch errors, all we need to do is wrap the code in a classic try/catch block.

To use async/await :

1. Write your normal function as you would

const flyToTheMoon = () => {
  const takeOff = startEngine.start(); // async call
  if (takeOff) {
    return "We're sky high!";
  }
}

2. Add an async before the function because we want it to be an async function and an await before your async call since we’ll be await ing its response.

const flyToTheMoon =  async () => {
  const takeOff = await startEngine.start(); // async call
  if (takeOff) {
    return "We're sky high!";
  }
}

There you have it, your function now leverages on the awesomeness of async/await. If you need to make more async calls within your function you simply add an await before it.

const flyToTheMoon =  async () => {
  const takeOff = await startEngine.start(); // an async call 
  const launchCodes = await startEngine.getLaunchCodes(takeOff); // another async call
  const getConfirmation = await startEngine.getConfirmation(launchCodes); // yet another async call
  if (getConfirmation) {
    return "We're sky high!";
  }
}

With async/await we can write cleaner code, easily handle errors/debug our code, and remain happy ever after in “async paradise”.

Want to learn more about async/await, check it out on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Take a moment to 👏 and share!