【初級者脱却】JavaScriptの非同期通信について#1　async関数の戻り値

はじめに

JavaScriptにおける非同期通信で躓いた人は結構多いかと思います。
若手エンジニアはこれをなんとなく使えるって人は多いけど、ちゃんと仕組みを理解して使えている人は決して多くない印象。
そこで、小難しい解説を極力排除しつつ、JavaScriptの非同期通信を理解するサポートになる記事を複数回に分けて書いていきたいと思います。
今回はその第1弾です。

async関数

JavaScriptにおける非同期通信は、以前はPromise-thenを使ったメソッドチェーンが使われていましたが、今はES8で追加されたasync-awaitを使った記述が一般的かと思います。　
asyncの付かない関数は同期処理となり、順を追って実行されますが、asyncを付けた関数は非同期処理となります。

async関数の戻り値

まずはasync関数の戻り値が、通常の関数とどう違うのかについて。

• 通常の関数の場合

function doFunc () {
  return obj = {
    key1: 'val1'
  }
}
console.log(doFunc()); // {key1: "val1"}

これは当然ですが、doFunc()関数が返したobjをコンソールログで出力します。
ではこれはどうでしょう。

async function doFunc () {
  return obj = {
    key1: 'val1'
  }
}
console.log(doFunc()); // Promise {}

doFunc()関数がリターンしているオブジェクトが、コンソールログで出力されません。　　
これは、async関数の戻り値がpromiseであるためです。

では、promiseとは一体何者なのか。
次回はそれについて解説します。