Introduction

In this article, we will learn about the async/await in JavaScript from scratch. First, we will learn about each keyword in detail and then we will move on to how we can use the combination async/await to handle asynchronous operations. Next, we'll take a closer look at what's happening behind the scenes within the JavaScript engine. In the end, we will cover the advantages of using async/await over the conventional way of using .then() and .catch() block. So, without further ado, let's get started . . .

---

async

1. async keyword is used before a function to make it asynchronous in behavior. Now what does that mean? We will get to see this in action in subsequent sections.

2. Fun fact! An async function always returns a Promise no matter what. In case you don't know what is a Promise in JavaScript do check out this article.

Now let's see how to create an async function and how it behaves -

async function getSum(num1, num2) {
  return num1 + num2;
}

const result = getSum(2,3);
console.log(result);

What do you think, what would be logged on the console? Umm! maybe 5? Try to run this code on your system and see what is there on the console.

Waiting . . .

Waiting . . .

Woah! We were not expecting that. It's a promise that is printed on the console, but why?

Remember I told you that an async function always returns a promise no matter what, Here you got your answer. Either you manually return a promise from an async function or if you don't it will automatically wrap your returned value inside a promise.

---

await

1. await keyword can only be used inside an async function.

2. We use the await keyword before a Promise to get the resolved or fulfilled value of the promise.

3. In other words, the await keyword unwraps the promise and gives us the result of it.

const resolvedValue = await new Promise(resolve=>resolve(53));

So here you can see I have added the await keyword before the promise, and we have resolved it with the value 53, why 53? because..... why not? As soon as the promise is resolved we will get 53 in resolvedValue variable. If you are still unclear or confused about this, don't worry let's see both async and await in action with a real-world example in the next section. I am confident that you will have a clear understanding of it after reading the next section.

---

The amazing duo: async await

We use the combination of async and await to handle promises. We can also handle promises by using .then() and .catch() block which is the traditional/old way of handling promises. But there are some advantages of using async-await which we will discuss in the last section. Now let's see a practical and real-time example example of async await.

function getUserNameAPI(userId) {
  let username;
  switch (userId) {
    case 1:
      username = "Jai";
      break;
    case 2:
      username = "Veeru";
      break;
    case 3:
      username = "Basanti";
      break;
    default:
      username = "Gabbar Singh";
  }
  return new Promise((resolve) => setTimeout(() => resolve(username), 5000));
}

async function getUsers() {
  console.log("function execution started");
  const userName = await getUserNameAPI(2);
  console.log(userName);
}

getUsers();

So here you can see I am faking an API call by using getUserNameAPI which accepts the userId and returns the respective userName after 5 seconds. To consume this fake API I have created an async function getUsers so that I can use await to get the resolved value of the promise returned by getUserNameAPI. Are you wondering what would be the output of this code and how would it work under the hood? Let's see this in the next section.

---

Behind the scenes

I request you to copy the above code snippet and execute it on your system to see the output. Let's now discuss about it's output -

• The first message logged on the console is function execution started and this was logged as soon as the getUsers function execution started.

• Then we encounter the next statement where we have used the await keyword before the promise returned by getUserNameAPI function, which resolves in 5 seconds.

• Now after 5 seconds when the promise is resolved, userName is assigned the returned value and on execution of the next line Veeru is printed on the console.

• So we saw that it waited for the promise to resolve before executing the next line of code.

• Wait! Does that mean it blocks the main thread? ..... No, it doesn't block the main thread. So when it encounters the await statement the function execution is suspended and removed from the call stack.

• As soon as the promise is resolved, the function execution starts from the line from where it was suspended i.e. the function is pushed back to the call stack.

So this is how things are working behind the scenes. I hope now you are confident about how async await works in JavaScript. I'm pretty sure the next time you see something like this -

async function getUsers() {
  const result = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await result.json();
  console.log(users);
}

You would know how things are working under the hood.

---

Advantages

1. As a developer the readability of code improves, It is much easier to read asynchronous operations with the help of async await than the traditional approach of .then() and .catch().

2. By using async await we can avoid the endless promise chaining. We all know the pain of never-ending promise chains.

3. While using .then() block we get the result inside .then() block itself, which is annoying at times, what if I want the result to be available outside .then() block? In such scenarios async await is the perfect thing for you.

myPromise.then(result=>console.log("result available here, not outside it!"));
------------------------------------------------------------------------------
const result = await myPromise; //result is accessible outside without any 
                                //sort of then block

---

Conclusion

So that was all from my side on async await in JavaScript, I hope this has given you a clear picture of how it works and where can we use this. I would love to hear your thoughts and feedback on this article. Thank you :)