A common misconception about async/await in JavaScript

With promises we write asynchronous code that emulates synchronous code but with async/await we write asynchronous code that looks like synchronous code. As a consequence this often leads to misconception.

I decided to write this article because since the introduction of async/await I have noted that a lot of developers have more difficulties understanding what is executed asynchronously and synchronously. These difficulties were already around with promises but async/await have emphasized it by coming closer to synchronous programming.

Let’s work with a simple example that writes a message before then after an asynchronous operation. We will implement it using async/await and a promise:

Some developers tend to believe that the function written with async/await will always be executed synchronously because the code looks like if we wait synchronously for the delayed operation before continuing the execution. So let’s run it with this code and compare with the promise version:

This is the output:

(1) with await(1) before await(1) with promise(1) before promise(1) after all(1) after await(1) after promise

As you can see the function code is run synchronously only until the first encountered await. Like with promises, it is up to the caller to decide if the code will be executed synchronously or not. Let’s look at the more synchronous version:

And this is the output:

(2) with await(2) before await(2) after await(2) with promise(2) before promise(2) after promise(2) after all

If the caller does not make use of await(respectively then with promises) then your code will not run synchronously. That’s the reason why async/await does not work as expected with constructs like forEach.

A common misconception about async/await in JavaScript was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.