Async / Await in JavaScript

Here's a question for you. Is JavaScript synchronous, as in it finishes one task at a time, or is it asynchronous, where it can work on many tasks at one time? Now, JavaScript 101 would tell us that it is synchronous, because it basically works its way down the code and works on each task one at a time. If that is the case, how do async functions work? If JavaScript is synchronous, how can you have an asynchronous function? Isn't that contradictory? I'm going to take a deeper look and like many of my other articles I will use the MDN documents as my source with links at the bottom.

So, what happens if you are loading an application or a site and let's say you need to pull information from another source? Obviously, it is going to take longer to pull the information from the other source than it is to finish loading all of your application and your own content. I use this example because calling an API call with an async function is probably one of the most common uses of async functions.

Async functions are made to return a promise that is either resolved or rejected. They were made in order to make promises easier to write. Many times, an async function is accompanied by an await, but an await is not required when writing async functions. Without an await expression, the async function will run synchronously, but the await expression allows the async function to run asynchronously, because this is exactly when the promise is returned.

Here is an example of syntax without the await expression:

async function name(){
  return value;
}

Here is an example of syntax with an await expression:

async function name(){
  const x = await promiseFunction(val);
  console.log(val); //Value from the promise
}

So, to explain these two blocks. In the first block, the code is just called synchronously, and then the value is returned. In the second block, when the code is called, it starts synchronously also until it reaches the await expression. Every time it goes through the await expression it evaluates if the promise is resolved, rejected or still unfulfilled. If it has been resolved, then the value of the promise is returned and the function is finished. If the promise is rejected, then the value of course will be rejected and also the function is finished. However, if the promise is unfulfilled, the program continues to execute the next functions in the stack. Whenever the promise is either resolved or rejected, then it will be returned and added to the stack. In this way, even though JavaScript is technically synchronous, it can act as though it is asynchronous.

I really wanted to cover this topic because to be honest, this was a topic that was a little hard for me to get my head around in the beginning. I wanted to spend time on this topic to really understand it more in a deeper way and hopefully be able to explain it to more people.

Photo by Ferenc Almasi on Unsplash

Async Function - MDN. (n.d.). Retrieved June 18, 2024, from https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview