returnでawaitしてもしなくてもいいのか

Question

fはasync関数だとして、以下は同じですか？

async g(){
  return f()
}

async g(){
  return await f()
}

Comments

[m.ts10806]

「同じ」の基準は？
実際に実行してみればわかることでは。

Answer 1

回答する前に、Javascriptにおいて、非同期関数(async function)の書き方が若干違いいますね。

async function g(){
  return f()
}

async function g(){
  return await f()
}

さて、上記2つの書き方の違いはreturn f()とreturn await f()です。この書き方の違いによってどう、機能的な違いがあるかですが、回答としては、完全に同じではないですが、ほぼ違いはありません。エラー処理によって差異が生まれます。

Javascriptにおいて、async functionは、Promiseオブジェクトを返す関数です。

async function afunc(){ return value; } 

と書くと、async functionの返り値は、暗黙的にPromise.resolveでラップされます。

function afunc(){ return Promise.resolve(value); }

Promise.resolveは与えられたオブジェクトがPromiseであれば、そのままそのオブジェクトを返し、そうでなければPromiseオブジェクトに変換して返します。

一方awaitはPromiseが成功する時の値を返します。つまり

const a = await promise;
b(a);

と書けば、

promise.then(a=>{ b(a) });

とほぼ同じになり、つまりpromiseが成功した時のPromise.thenコールバックの引数に与えられるオブジェクトがそのまま、返されるというわけです。

これをらを見ていくと、

async function g1(){
  return f()
}

async function g2(){
  return await f()
}

は、このように書き換えることができ

function g1(){
   return Promise.resolve(f());
}

function g2(){
   return f().then(x=>Promise.resolve(x));
}

の違いとなり、return f()はf()で帰ってきたPromiseをそのまま返し、return await f()は、f()で帰ってきたPromiseの成功したオブジェクトを取り出し、それをPromiseオブジェクトに変換していると言えます。

よってreturn f()とreturn await f()はPromiseは同じ成功した値を持つPromiseを返すので、「ほとんど一緒」と言えるわけです。

じゃあ、どこで違いが出るか？と言えば、エラー処理で出てきます。

たとえば、

async function g_fail1(){
  try{
    return f();
  }catch(error){
    return null;
  }
}

async function g_fail2(){
  try{
    return await f();
  }catch(error){
    return null;
  }
}

と書けば、g_fail1の方は、失敗したPromiseオブジェクトであっても、エラーを捕捉することができず、一方、g_fail2の方であれば、失敗したPromiseオブジェクトのエラーを補足することが可能です。

このような違いがあります。また、細かいことですが、マイクロタスクが発生するかしないかで若干、実行速度が違うようです。