コールバック関数

コールバック関数とは

コールバック関数とは、関数の引数として渡す関数のことです。後で実行する関数を、引数として指定します。

func2がコールバック関数です。イメージは、電話のコールバックと同じです。後で連絡する連絡先を指定します。

コールバック関数の使い方

以下は、コールバック関数の利用例です。

function func1(callback) {
  alert("1番目");
  callback();
  alert("3番目");
}

function func2() {
  alert("2番目");
}

func1(func2);

func1(func2);で、func1の引数としてコールバック関数func2を渡しています。このため、func1実行時にコールバック関数としてfunc2が呼び出されます。func2が終わると、func1に戻ります。

つまり、「1番目」→「2番目」→「3番目」の順でアラートが表示されます。

コールバック関数のメリット

コールバック関数のメリットは、呼び出し元で分岐先を決めることができる点です。

func1を実行する時に、func2を呼び出すのか、func3を呼び出すのか決めています。

以下は、例です。

function func1(callback) {
  alert("計算終了です");
  callback();
}

function func2() {
  alert("スペードのAです");
}

function func3() {
  alert("クラブのAです");
}

{
  let x = Math.ceil( Math.random() * 2 );
  if ( x === 1 ) {
    func1(func2);
  } else {
    func1(func3);
  }
}

xが1であれば「計算終了です」が表示された後、func2が実行されて「スペードのAです」と表示されます。xが2であれば「計算終了です」が表示された後、func3が実行されて「クラブのAです」と表示されます。

このように、func1の中で分岐先を決めるのではなく、事前に次に呼び出す関数(この例では、func1かfunc2か)を決めておけます。

コールバック関数に引数を渡す

コールバック関数に引数を渡すために、func1(func2(2));などと記述できません。コールバック関数に引数を渡す例を以下に示します。

function func1(callback,x) {
  alert("1番目");
  callback(x);
  alert("3番目");
}

function func2(x) {
  alert(x);
}

func1(func2,"2番目");

"2番目"は、func1の引数です。変数xで受け取っています。コールバックする時、xを引数としてfunc2に渡しています。つまり、一旦はfunc1に引数として渡し、func1の中で引数としてfunc2に渡します。

上記は、「1番目」→「2番目」→「3番目」の順でアラートが表示されます。

イベント処理でのコールバック関数

addEventListenerメソッドで呼び出す関数も、コールバック関数です。

<input type="button" id="test1" value="ボタン">

<script>
function func1() {
  alert("テスト");
}
const x = document.querySelector("#test1");
x.addEventListener("click", func1);
</script>

addEventListenerは、ボタンをクリックするまで待機する非同期処理(順番にではなくイベントが発生すると処理)を行います。引数としてfunc1を渡していますが、これがコールバック関数です。addEventListenerは、関数です。この関数の中でfunc1がコールバックされます。

もし、x.addEventListener("mouseout", func2);を追加した場合、マウスがボタンから出るとfunc2にコールバックします。つまり、イベントの種類(クリックやマウス移動)によって、異なるコールバック関数を指定できます。