【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