Why no-return-await vs const x = await?

JavascriptAsync AwaitEslint

Javascript Problem Overview


What is the difference between

return await foo()

and

const t = await foo();
return t

http://eslint.org/docs/rules/no-return-await

Javascript Solutions


Solution 1 - Javascript

Basically, because return await is redundant.

Look at it from a slightly higher level of how you actually use an async function:

const myFunc = async () => {
  return await doSomething();
};

await myFunc();

Any async function is already going to return a Promise, and must be dealt with as a Promise (either directly as a Promise, or by also await-ing.

If you await inside of the function, it's redundant because the function outside will also await it in some way, so there is no reason to not just send the Promise along and let the outer thing deal with it.

It's not syntactically wrong or incorrect and it generally won't cause issues. It's just entirely redundant which is why the linter triggers on it.

Solution 2 - Javascript

Using return await does have some newly introduced benefits in v8 engine used by Node.js, Chrome and a few other browsers:

v8 introduced a --async-stack-traces flag which as of V8 v7.3 is enabled by default (Node.js v12.0.0).

This flags provides an improved developer experience by enriching the Error stack property with async function calls stack trace.

async function foo() {
  return bar();
}

async function bar() {
  await Promise.resolve();
  throw new Error('BEEP BEEP');
}

foo().catch(error => console.log(error.stack));


Error: BEEP BEEP
    at bar (<anonymous>:7:9)

Note that by calling return bar(); foo() function call does not appear at all in the error stack. Changing it to return await bar(); gives a much better error stack output:

async function foo() {
  return await bar();
}
foo();

Error: BEEP BEEP
    at bar (<anonymous>:7:9)
    at async foo (<anonymous>:2:10)

This indeed does provide much better error stack tracing, hence it is HIGHLY encouraged to always await your promises.

Additionally, async/wait now outperformes hand written promises:

> async/await outperforms hand-written promise code now. The key takeaway here is that we significantly reduced the overhead of async functions — not just in V8, but across all JavaScript engines, by patching the spec. Source

Read more about these changes on the v8.dev blog: https://v8.dev/blog/fast-async#improved-developer-experience

Solution 3 - Javascript

Because you can just

async function() {
  return foo();
}

The returned result of async function always is Promise, no matter you return the exact value or another Promise object inside the function body

Solution 4 - Javascript

The significant difference between return asyncFunc and return await Promise.resolve() is by following the second approach you can catch an error if something wrong inside async function.

    function afunction() {
      return asyncFun();
    }
   
    // with await
    function afunction() {
     try {
         return await asyncFun();
     } catch(err) {
         handleError(err);
         // return error result;
       }
}

   
    

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAturSamsView Question on Stackoverflow
Solution 1 - JavascriptsamanimeView Answer on Stackoverflow
Solution 2 - JavascriptBamiehView Answer on Stackoverflow
Solution 3 - Javascriptedvard chenView Answer on Stackoverflow
Solution 4 - JavascriptHusniddin QurbonboyevView Answer on Stackoverflow