たまに、「コールバック関数」って聞きますが、よく理解をしていなかったので調べてみました。
コールバック関数とは？
「引数として渡される関数」のこと。
JavaScriptはイベント駆動のプログラム（ボタンをクリックしたとか）なのでコールバック関数が使われます。イベントに対してコールバック関数を色々と登録しておきます。なお、JavaScriptでは登録するコールバック関数のシグネチャ（関数の型）はあらかじめ仕様で決まっています。
要するに…。
JavaScriptでは、下記のように関数を変数に代入できるのですが、その代入した変数をさらに別の関数に引数として渡すことで、引き渡した関数の任意のタイミングで、引数の関数を実行できることです。
var callbackTest = function () {
console.log('Hello World');
}
用途
JavaScripは、非同期（いちいち一つの処理を待っておらず、時間がかかるようであれば、処理の結果を待たずに次の行を実行する等）で動くのですが、同期処理（処理を順番に実行する）を実現したい場合に良く使われるアプローチの一つです。
「非同期処理」については、詳しくは、下記の記事でも解説していますので、不安な方は御覧下さい。
下記のように様々な局面で、コールバック関数を利用されてきました。
- setTimeoutメソッド
- setIntervalメソッド
- XMLHttpRequestオブジェクト
コールバック関数の問題点「コールバック地獄」について
非同期処理が、いくつも連なる場合は、コールバック関数では入れ子が深くなりすぎて、1つの関数が肥大化するという問題が起きました。
これを「コールバック地獄」と呼んでいます。
それを解決する手法として、Promiseオブジェクトというオブジェクトがあります。
Promiseオブジェクトについて、詳しくは下記の記事で解説しています。
実際に実装してみる。
わかりやすく実装するとしたら下記のようになります。
//コールバック関数
var callbackTest = function () {
console.log('Hello World');
}
//コールバック関数を実行する関数
function execCallback (callbackTest) {
console.log('callback前処理');
callbackTest();
}
// コールバック関数をコールバック関数を実行する関数に渡して任意のタイミングで実行してもらう。
execCallback(callbackTest);
処理結果としては、コンソールニ下記のように出力されています。
この記事へのコメントはありません。