• JavaScriptはシングルスレッドである
  • シングルスレッド とは簡単に言うと一度に１つの処理しか実行できないこと
• そのため処理に時間がかかる関数などを実行したとき、その関数のせいで後続の処理が実行できず、ページの描画などを遅らせてしまったり、クリックなどのユーザーの入力を処理できなくなったりしてしまう

イベントループ

• シングルスレッドであるJavaScriptで非同期処理を可能にしているのがイベントループ

処理順序

以下のようなJavaScriptを実行したときを考えます。

const response = () => {
 return 'response';
}

response();
setTimeout(() => {
 return 'setTimeout';
}, 1000);

まず、response関数が呼ばれてcall stack（コールスタック）というJavaScriptエンジンの一部で提供されているものに追加されます。
その次にcall stackに追加されたresponse関数が値を返します。
次にsetTimeout関数が実行され、setTimeout関数のコールバック関数がWEB APIに渡されます。
（setTimeoutはweb apiで提供されている機能です）
WEB APIでは1000ms後にタイマーが実行され、キューと呼ばれるものに渡されます。

イベントループがcall stackとキューを調べ、コールスタックが空だった場合、キューに入っている処理を実行します。

上記がざっくりイベントループによるJavaScriptでの非同期処理の仕組みです。