paint-brush
A common misconception about async/await in JavaScriptby@luc.claustres
29,141 reads
29,141 reads

A common misconception about async/await in JavaScript

by Luc ClaustresFebruary 13th, 2018
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Some developers tend to believe that the function written with async/await will always be executed synchronously. This is because the code looks like if we wait synchronously for the delayed operation before continuing the execution. Like with promises, it is up to the caller to decide if the code will run synchronously or not. That’s the reason why the code does not work as expected with constructs like for Each. If the caller does not make use of await(respectively then with promises) then your code will not run synchronous.
featured image - A common misconception about async/await in JavaScript
Luc Claustres HackerNoon profile picture

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.

If you liked this article, hit the applause button below, share with your audience, follow me on Medium or read more for insights about: not using console.log anymore, the Feathers framework, the raise and next step of Artificial Intelligence, the evolution of Computer Science, the goodness of unlearning and why software development should help you in life ?