17.非同期プログラミング(Event Loop)

📌 17-1活動サイクルは?

イベントループは、JavaScriptエンジンがコードを解析し、実行する一連のプロセスです.
🧩 JavaScriptエンジンの機能

実行コンテキストは1つのみです.スタックは1つしか存在しません.

シングルスレッド実行

JavaScriptのコードは同期して実行されます.

同期して実行されるため、1つのコードを実行する過程で他のことを処理することはできません.(ブロック現象)

処理時間の長い処理をキューに送信し、実行を待つ.(JavaScriptが単一スレッドを克服する方法)

📌 17-2イベントリングのコンポーネント

Heap:値を格納するメモリ領域.

CallStack:JavaScriptコードを実行するスペースは、コンテキストを実行するスペースです.

TaskQueue:非同期で実行されるコード待ちのスペース.

Event Loop:イベントループは、呼スタックで現在実行されているコードを確認した後、存在しない場合、処理対象コードを呼スタックに送信する.

写真ソース

📌 17-3非同期処理

テクニカルキューで待機し、Callスタックに入って実行します.マイクロテクノロジーもありますが、必ずしも形式的に区分する必要はありません.
💡 マイクロテクノロジーはPromisなどの非同期機でも優先順位で区切られているが,比較する必要はない.どうせ非同期通信は主に同期制御に用いられる.優先度は重要ではないからだ.
🧩 非同期処理のタスクタイプ

DOMイベント:イベントハンドラまたはDOMにアクセスするコード

NetWork:XMLHttpRequest、Fetch、Ajax、Axiosなどサーバと通信するコード

Timer:settimeoutなどのタイマ関数

🧩 非同期処理コードの例

// 각각의 함수들을 정의
const func1 = () => console.log('1');
const func2 = () => console.log('2');
// setTimeOut를 return하는 비동기 코드
const func3 = () => setTimeout(() => console.log('3'), 2000);

/* 
결과 : 
1
2
3
*/
func3();
func1();
func2();

// 각각의 함수들을 정의
const func1 = () => console.log('1');
const func2 = () => console.log('2');
// setTimeOut를 return하는 비동기 코드
const func3 = () => setTimeout(() => console.log('3'), 0);

/* 
결과 : 
1
2
3
*/
func3();
func1();
func2();

🔥 最後に表示されるコードではsettimeoutのタイマが0であっても後で出力されます.関数自体が非同期で実行されるためです.