【JavaScript】同期処理/非同期処理とは （備忘録）

１．同期処理 とは

・処理が上から順番に実行され、次の処理は前の処理が完了するまで待ちます。そのため処理全体を把握しやすいメリットがあります。
・１つでも時間のかかる処理が存在すると、プログラム全体の処理が完了するのに時間が長くなるというデメリットがあります。

２．非同期処理とは

・前の処理が完了するのを待たずに、次の処理が開始されます。
・非同期処理を適切に活用できると、プログラム全体の処理速度を向上させることができます。
・各処理がどの順番で実行されるか把握するのが難しくなるというデメリットがあります。

３．サンプルプログラム

〇例１：同期処理

Sample_1.js

function step1() {
    console.log("処理開始");
}

function step2() {
    const data = prompt('文字を入力してください', '');
    console.log(`入力した文字は${data}です`)
}

function step3() {
    console.log("処理結果出力");
}


step1();
step2();
step3();

①．前の関数の処理が完了するまで、次の関数の処理は開始されません。
②．同期処理なので、各関数の処理結果が順番通りに出力されます。

〇例２：非同期処理

Sample_2.js

function step1() {
    console.log("データ処理開始");
    setTimeout(() => {
      console.log("データ処理完了");
    }, 2000);
}

function step2() {
    console.log("データ処理中");
}

function step3() {
    console.log("処理結果を出力");
}

step1();
step2();
step3();

・実行結果

①．step1() は非同期処理を行います。setTimeout() メソッドにより2秒後に データ取得完了 と表示されます。
②．step2() ・ step3() の処理は待たずにすぐ実行されるため、非同期処理の動作を確認できます。

〇例３：非同期処理・コールバック関数・高階関数を併用

Sample_3.js

console.log("全体処理開始");

// 高階関数
function readData(callback) {
    setTimeout(() => {
        console.log("元データ読み込み完了");
        // コールバック関数を呼び出す
        callback();
    }, 2000);
}

/*
    高階関数readDataを呼び出す
    引数に直接、コールバック関数を記述
*/
readData(function() {
    console.log("データ加工開始");
});

非同期処理を有効活用する為には、コールバック関数/高階関数の理解も重要です。

４．参考

・非同期処理とは？ 同期処理との違い、実装方法について解説
・【JavaScript】同期通信と非同期通信の違い

５．その他

・実行環境