JSのコールバック関数を理解したので、メモしておく

2023.09.02

今までJSでコードを書く際に、コールバック関数と遭遇することが多くなってきた。

コールバック関数の定義があやふやだったので、自分用にメモとして残しておく。

Table of Contents

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

コールバック関数は、ある関数が終了した後、または特定のイベント（例: クリックイベントや非同期処理の終了など）の後に自動的に実行される関数を指す。

具体的には、主に非同期処理の結果を受け取る時や、特定のイベントや操作が完了した後に実行される動作を定義する際などに役立つ。

下記では呼び出した関数の引数で処理の内容が変わっていることが見て取れる。

function fetchData(callback) {//fetchData関数にこの中で定義されているコールバック関数を引数としてセット
    //今後fetchData関数が引数付きで呼び出されることで、コールバック関数callback(data);に入っている値を代入できる
    let data = "fetched data";//この値を特定のタイミング使いまわしたい
    callback(data);//この関数はdataの値ををいれるプレースホルダーのような意味合いとして定義
}

function printData(data) {//printData関数としてdataの値を表示（この関数は後に引数として使われる）
    console.log(data);
}

function showAlert(data) {
    alert(data);
}

// fetchDataをfetchDataの引数として呼び出して、printData関数をコールバックとして渡す
fetchData(printData);

// fetchDataを呼び出して、showAlert関数をコールバックとして渡す
fetchData(showAlert);

上記のdataの値を非同期的なデータ取得処理やイベントなどの特定のタイミングで処理したいので、他のプログラムの中でコールバック関数として呼び出しているのだ。

このfetchData関数に渡されるprintData関数がコールバック関数としての役割を果たしているので、fetchData内のcallbackは、このprintDataを指している。

まとめると下記のように解釈できる。

  • function printData(data)が下記の引数に代入される
    ↓
  • function fetchData(callback)　この引数（callback）に上記の処理が入る
    ↓
  • callback(data);の引数＝console.log(data);という意味になる。callbackがconsole.log(data);のプレースホルダーになるという意味

もっとかみ砕いて説明すると、別の関数（printData）をメイン関数（fetchData）で定義したプレースホルダーとしての関数（callback）に呼び出し、値（data）を与える。

つまりコールバック関数とは別の関数に値を与えてを処理するための受け皿、箱のようなイメージとして覚えておくといいだろう。

関連記事

PIC UP