【JavaScript】コールバック関数

JavaScript/jQuery

もくじ

コールバック関数とは

コールバック関数は他の関数に引数として渡される関数で、外側の関数で何らかの処理やアクションを実行します。

参考：Callback function (コールバック関数) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

サンプルコード

コールバック関数にする前

仮に、データを保存したあとにアラートかログを出すコールバック関数を作ってみます。

function save(type) {
  // 保存する処理

  if (type == "alert"){
    alert("アラート");
  } else if (type == "log"){
    console.log("ログ");
};

save("alert");  // 「アラート」とアラートがでます
save("ログ");  // 「ログ」とログが出力されます

コールバック関数を使用

function save(callbackFunc) {
  // 保存する処理
  callbackFunc();　// これがコールバック関数
};

save(function(){
  alert("アラート");
});
save(function(){
  console.log("ログ");
});

これだけ見ると、よくわからーん！！ってなりませんか。私は錯綜して混乱しました。

解説

function save(callbackFunc) {
  // 保存する処理
  callbackFunc();
};

上述の例で解説します。

save()関数の中に、引数と同じ名前のcallbackFunc();がありますよね。そこに引数で渡した関数がそのまま挿入されるのです。

例を見てみます。

save(function(){
  alert("アラート");
});

これはすなわち、以下のように解釈できます。

function save() {
  // 保存する処理
  function(){
    alert("アラート");
  };
};

サンプルコード2

MDN Web Docsにあるサンプルを見てみます。

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

解説

function greeting(name) {
  alert('Hello ' + name);
}

これは普通の関数ですね。引数に名前を渡して、挨拶を返す関数です。

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

でました。コールバック関数。

processUserInputという関数を定義しています。

var name = prompt('Please enter your name.');

はじめに変数nameを定義していますね。

promptはダイアログから値を入力してもらう関数です。

callback(name);

入力された名前を変数nameに代入し次のcallback関数に引数として渡しています。

最後に使用例です。

processUserInput(greeting);

これをコールバック関数を使わずに表すと以下のようになります。

function processUserInput() {
  var name = prompt('Please enter your name.');
  function greeting(name) {
   alert('Hello ' + name);
  }
}

このように、var name = prompt('Please enter your name.');を何度も使ってそのあとの処理を別で実行させることができます。

便利ですが慣れないと混乱を生じやすいので、何度も使って慣れていくことが大切ですね。

参考URL

Callback function (コールバック関数) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

window.prompt - Web API | MDN