async await の実行順がよくわからないからログに出した

「async await を使えば実行を待てる！」「非同期処理を同期的に書ける！」という説明をみて試してみると、自分の想像と違った挙動だったりして「むむむ？」となりました。 「どうも理解が足りてないな・・・」と思い、一旦ログに出して実行順を確認しようという趣です。

console.log(1);
sleep(6); // await じゃない通常の非同期処理
console.log(2);

(async function(){
  console.log(3);
  await sleep(7);
  console.log(8);

  if (await sleep(11)) {
    console.log(12, 'sleep result true');
  } else {
    console.log(12, 'sleep result false');
  }
  
  console.log(13);
  await sleep(16);
  console.log(17);
})();

console.log(4);

(async function(){
  console.log(5);
  await sleep(9);
  console.log(10);
  await sleep(14);
  console.log(15);
})();

function sleep(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(num, 'sleep');
      resolve(Math.random() > 0.5);
    }, 1000);
  });
}

// ログへの出力
1
2
3
4
5
6 "sleep"
7 "sleep"
8
9 "sleep"
10
11 "sleep"
12 "sleep result false"
13
14 "sleep"
15
16 "sleep"
17

各 async function は並列に実行されています。 個別の async function 内での実行順は await のおかげで待機されるため担保されるわけですね。