【JavaScript】このasync/awaitの実行順、自信を持って説明できますか？ #初心者 – Qiita

前のセクションでは、「new Promiseのexecutorは同期的だが、.then()などで繋いだ処理は非同期になる」という事実を確認しました。
そして、「その非同期処理は一体いつ、どのような仕組みで実行されるのか？」という新たな疑問が生まれました。

その疑問に答えるのが、まさにこの 「イベントループ (Event Loop)」 という仕組みです。

まず大前提として、JAVAやC#などの言語とは異なり、 JavaScriptはシングルスレッド で動作します。
これは、 「一度に一つのことしかできない」 ということを意味します。
では、どうやって処理を後回しにするなどの非同期的な振る舞いを実現しているのでしょうか。

その答えが、以下の図で示されるような 「イベントループ」 と 「キュー」 を用いた仕組みです。

この図の流れを、より具体的に説明すると以下のようになります。

1. 処理の依頼（メッセージ追加）
   メインスレッドで実行中の同期的な処理がすべて終わった後、非同期的に実行したい処理（例: .then()のコールバックなど）は、すぐには実行されません。
   代わりに、「メッセージ」として キュー(Queue) という待機場所に追加されます。
   キューは「FIFO (First-In, First-Out)」の原則に従い、先に追加されたメッセージから順番に並びます。

2. 監視と取り出し（イベントループ）
   イベントループは、このキューに新しいメッセージが追加されるのを常に監視しています。
   そして、メインスレッドが現在実行中のタスクを終え、手が空くのを待っています。

3. 実行（メッセージ返却）
   メインスレッドの手が空くと、イベントループはキューの先頭からメッセージを一つ取り出し、メインスレッドに渡します。
   メッセージを受け取ったメインスレッドが、そのメッセージに対応する処理（コールバック関数など）を実際に実行します。

この一連の流れを、キューにメッセージがなくなるまで繰り返します。

つまり、JavaScriptの非同期処理とは、別のスレッドが裏で並行して動いているわけではなく、　「実行すべき処理を一旦キューに並べておき、後でメインスレッドが順番に実行する」　ことで、実行タイミングをずらしているのです。

イベントループはあくまで処理の順番を管理するだけで、実際にコードを実行するのは常に単一のメインスレッドです。これが、JavaScriptはシングルスレッド であると言われる本質的な理由です。

補足：シングルスレッドとマルチスレッドの違い

exec();

function exec() {
  console.log(1);
  new Promise((resolve) => {
    console.log(2);
    // 重い処理
    for (var i = 0; i  100000; i++) {
      // something.
    }
    console.log(3);
    resolve();
  })
  .then(() => {
    console.log(4);
  });
  console.log(5);
 
  return 'completed';
}

exec();

function exec() {
  console.log(1);
  new Promise((resolve) => {
    console.log(2);
    setTimeout(() => {
      // 重い処理
      for (var i = 0; i  100000; i++) {
        // something.
      }
      console.log(3);
      resolve();
    });
  })
  .then(() => {
    console.log(4);
  });
  console.log(5);

  return 'completed';
}

exec();

function exec() {
  console.log(1);
  something().then((res) => {
    console.log(res);
    console.log(3);
  });
  console.log(4);
}

function something() {
  return new Promise((resolve) => {
    console.log(2);
    resolve('test');
  })
}

exec();
console.log(4); // exec()がasyncなので4の出力は外に出す

async function exec() { // asyncを付与
  console.log(1);
  const res = await something(); // awaitで待つ
  console.log(res);
  console.log(3);
 }

async function something() { // asyncを付与
  console.log(2);
  return 'test'; // resolve('test')と書かずにそのままreturnする
}

exec();
console.log(4);

async function exec() {
  console.log(1);
  const res = await something(); // Promiseを返すのでawaitできる
  console.log(res);
  console.log(3);
}

// setTimeoutをPromiseでラップすることでawaitできるようになる
function something() {
  return new Promise(resolve => {
    setTimeout(() => {
      // ここで重い処理を実行
      console.log(2);
      resolve('test'); // 処理完了後にresolveを呼ぶ
    }, 0);
  });
}

exec();
console.log(4);

async function exec() {
  console.log(1);
  const res = await (async () => {
    // この部分は即座に実行されるasyncな無名関数
    return 'test';
  })(); // ← ()で即時実行！
  
  // さらに短く書くこともできます
  // const res = await (async () => 'test')();

  console.log(res);
  console.log(3);
}