javascriptの非同期の挙動について

Question

以下のように書くと

(async () => {
  const add = await [1, 2, 3].reduce(async (acc, v) => {
    await acc;
    return acc + v;
  }, 0);

  console.log(add);
})();

実行結果が以下のようになってしまうのですが

[object Promise]3

以下のように書き直すと

(async () => {
  const add = await [1, 2, 3].reduce(async (acc, v) => {
    await acc;
    return (await acc) + v;//この部分にawaitを追加
  }, 0);

  console.log(add);
})();

実行結果が（意図した通り）以下のようになります。

6

ここで質問なのですが
前者の場合、

    await acc;
    return acc + v;

と1行目でawait accと書いているのだから、reuturn acc+vのaccには、awaitされた後のaccがreturnされると思うのですが、なぜこのような挙動になるのでしょうか？

なぜ後者のように書かないといけないのか分かりません。

よろしければどなたか回答よろしくおねがいいたします。

Answer 1

awaitは基本的に「渡されたPromiseが解決されるまで待ち、解決後ラップされた値を返却する」ものであって、ラップされた値に上書きするような破壊的な演算子ではないからです。

つまりご質問のコードでは「Promiseが解決されるまで待つ」までは実行されますが、返却値は空に消えていることになります。

参考：MDN

例えば以下のようにawaitしたものを変数で受け取ってあげると正しく動きます。

(async () => {
  const add = await [1, 2, 3].reduce(async (acc, v) => {
    const resolved = await acc;
    return resolved + v;
  }, 0);

  console.log(add);
})();

Comments

[yaranaika12345]

めちゃくちゃスッキリしました！ありがとうございました！！????

Answer 2

await accと書いているのだから、reuturn acc+vのaccには、awaitされた後のaccがreturnされると思う

されません。await accと書いてもacc自体はPromiseのままです。