【JavaScript】コールバック関数

コールバック関数

引数として渡される関数。
JavaScriptの関数はデータ型の1種のため、数値型や文字列型と同様に関数の引数・戻り値として扱うことができる。
「関数を引数、戻り値として扱う関数」を関数を高級関数と呼ぶ。

function execCallBack(callback){
    console.log('execCallBack')
    callback()
}

var callBack = function(){
    console.log('callBack')
}

execCallBack(callBack)

// 出力結果
// callBack

なぜコールバック関数が必要か

  • 非同期処理の順番を制御するため
    JavaScriptは前の処理結果を待たずに次の処理を実行する、非同期処理が可能。
    (例) サーバーからデータを取得している間にフロント側のhtmlを更新する
    ただし、前の処理結果を元にして次の処理に移りたい場合、コールバック関数によって処理の実行順序を制御することができる。
// 表示する値をセットする前に次の処理が実行されてしまう

function setMessage() {
  var msg;
  setTimeout(function() {
    msg = 'Hello World';
  })
  console.log(msg);
}

setMessage();  

// 出力結果
// undifined
// 表示する値がセットされた後に次の処理を実行する

function setMessage(callback) {
  var msg;
  setTimeout(function() {
    msg = 'Hello World';
    callback(msg)
  });
}

var showMessage = function (msg){
    console.log(msg)
}

setMessage(showMessage);  

// 出力結果
// Hello World

参考