JavaScriptのコールバック関数を理解する

コールバック関数とは

コールバック関数とは、関数またはクラスメソッドの引数として関数を渡すことで、実行する処理を外部から注入するための手法です。

JavaScriptにおいて、このコールバック関数は非常に重要な役割を持ちます。
いたるところでコールバック関数が散見され、コールバック関数を見ないJavaScriptプロジェクトはないのでは？
と言われるレベルです。

コールバック関数の仕組み

コールバック関数は、前述のとおり関数の引数として関数を渡すということをしています。
C言語で言う所の「関数ポインタ」なのですが、なかなか理解されないことが多いです

コールバック関数の非常に簡単な例が以下のコードです。

// コールバックを受け取る関数
function loopback(_callback) {

    console.log('処理開始');
    // 1～5までの数字をコールバック関数に渡す
    for(let i=1;i<=5;i++) {
        _callback(i);
    }

    console.log('処理終了');
}

// コールバック関数を指定して、「loopback」を呼び出し
loopback(function(i) {
    console.log(`callback number is ${i}`);
});

これを実行すると、以下のようにコンソールに出力されます。

処理開始
callback number is 1
callback number is 2
callback number is 3
callback number is 4
callback number is 5
処理終了

コールバック関数が内部でどう使われているか

ここでのポイントが、関数「loopback」の呼び出しに対して、関数を指定しているという点です。

関数「loopback」上では、普通の変数と同じように引数として関数を受け取っています。

function loopback(_callback) {

そのうえで、この関数は、あたかも定義された関数かのように利用できます。

for(let i=1;i<=5;i++) {
    _callback(i);
}

このように、JavaScriptは関数であっても変数として取り扱うことができるという珍しい特性を持っています。
（と言っているとC言語使いに怒られます）

そのため、以下のように呼び出す部分を書き換えると理解がしやすいかもしれません。

変更前

loopback(function(i) {
    console.log(`callback number is ${i}`);
});

↓

変更後

const callback = function(i) {
    console.log(`callback number is ${i}`);
};

loopback(callback);

コールバック関数の引数

今回のサンプルでは、コールバック関数の引数として数値を渡しています。

このように、この引数として渡される値はコールバックごとにあらかじめ決められています。

そのため、「コールバック関数だから引数は○○だ！」といったような決まりごとはなく、
コールバックに引数がない場合もあります。

コールバック関数を要求するような機能を利用したい場合には、あらかじめ必要な（受け取れる引数の数と型）をしっかりと確認するとよいでしょう。

さいごに

コールバック関数はJavaScriptを使う上で非常に重要です。（大事なので２回）

いわゆる「コールバック地獄」なんていう単語も存在するくらいなので、気になる方は調べてみるとよいでしょう。