JavaScript Async functions (async/await) Await and operator precedence

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!


You have to keep the operator precedence in mind when using await keyword.

Imagine that we have an asynchronous function which calls another asynchronous function, getUnicorn() which returns a Promise that resolves to an instance of class Unicorn. Now we want to get the size of the unicorn using the getSize() method of that class.

Look at the following code:

async function myAsyncFunction() {
    await getUnicorn().getSize();

At first sight, it seems valid, but it's not. Due to operator precedence, it's equivalent to the following:

async function myAsyncFunction() {
    await (getUnicorn().getSize());

Here we attempt to call getSize() method of the Promise object, which isn't what we want.

Instead, we should use brackets to denote that we first want to wait for the unicorn, and then call getSize() method of the result:

async function asyncFunction() {
    (await getUnicorn()).getSize();

Of course. the previous version could be valid in some cases, for example, if the getUnicorn() function was synchronous, but the getSize() method was asynchronous.

Got any JavaScript Question?