What is async / await in JavaScript?
Tags: webdev, javascript, beginners, programming
Published: 2024-03-06 12:19:20

Before we dive into the nitty-gritty of `async` and `await`, let's set the stage. JavaScript, by nature, is non-blocking and asynchronous. This means it doesn't wait around for an operation to complete before moving on to the next one, which is great for keeping things snappy. But what about when you need to perform tasks that depend on the results of previous ones? Enter the world of asynchronous programming — a realm where managing sequences of operations without getting tangled up can be quite the challenge.

Traditionally, we relied on callbacks to handle these scenarios. But callbacks come with their own set of problems, often leading to the infamous "callback hell," where you're stuck in a maze of nested functions, losing sight of clarity and simplicity.

## Promises: A Step Forward

Promises stepped onto the scene with a promise (pun intended) of simplifying asynchronous code. They represent a future value — a pledge that at some point, there will be a result, be it a successful one or an error. By using `.then()` and `.catch()`, they allow us to write asynchronous code that's more structured and easier to follow than the callback jungle.

However, even with promises, the code can become cumbersome, especially when dealing with complex sequences of async operations. That's where `async` and `await` come into play, offering a cleaner and more intuitive way to work with promises.

## Understanding async / await

Imagine you could write asynchronous code that looks and behaves like synchronous code. That's the superpower `async` and `await` grant you.

### The `async` Function

An `async` function is a special type of function that simplifies the way we write promise-based code. By adding the `async` keyword before a function declaration, you transform it into a promise-based powerhouse. Here's the kicker: any `async` function automatically returns a promise.

```javascript
async function fetchData() {
  // This function now returns a promise
}
```

### The `await` Operator

The `await` operator works hand in hand with `async` functions. It tells JavaScript to pause the execution of the `async` function until the promise resolves. The beauty of `await` is that it unwraps the fulfilled value from the promise, allowing you to handle it as if it were a regular synchronous return value.

```javascript
async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  console.log(data); // This logs the resolved value of the fetch promise
}
```

Note how the `await` keyword halts the execution of `fetchData` until `fetch` resolves, giving us clean, synchronous-looking code that's actually asynchronous under the hood.

## Handling Errors Gracefully

One of the perks of `async` and `await` is how they simplify error handling. By using a `try`/`catch` block, you can handle both synchronous and asynchronous errors with the same construct, making your code cleaner and more consistent.

```javascript
async function fetchData() {
  try {
    let data = await fetch('https://api.example.com/data');
    console.log(data);
  } catch (error) {
    console.error('Oops, something went wrong:', error);
  }
}
```

---

Thanks for reading!

Check out our agency site, Cox Code: https://www.coxcode.io

Dialogue with me on X: @benajaero