JavaScriptの関数を取る関数（コールバック関数）について

JavaScriptのライブラリではよく第2引数や第3引数に関数を取る関数（メソッド）が見られます。
関数に関数を渡すとはどういうことなのでしょうか？

JavaScriptは関数定義を変数に代入する事ができる言語ですが、コールバック関数もそれを応用したテクニックです。
関数が実行された場合、その関数内では引数で受け取った関数が実行されます。

例えばあるイベントが発生してある関数が呼ばれた場合、そのイベント関連の情報を格納した配列やオブジェクトと共に、実行したい処理を無名関数として渡し即実行する事で、コードが短く済みます。

もし引数に関数を渡さない場合、あるイベントの関数が呼ばれたら、その関数内で特定の関数を定義するか、特定の関数を明示的に呼ばなければなりません。
※例えばa関数が呼ばれたら、a関数がb関数を呼ぶなど
しかしこのようにa関数がどの関数を呼ぶかを予め定義してしまうと再利用性を損ねます。

このため、a関数が呼ぶ関数を引数として渡し、a関数内には実装しない事で再利用性を確保しているのです。

a関数の引数に関数定義が書かれていると最初混乱しますが、これは「aさん、もし呼ばれたらこの関数を実行してね」という事なのです。

ちなみに引数に渡された関数は、呼ばれた関数内で変数に代入されて実行されます。
具体的には以下となります。

//関数を引数に取る関数aを定義
//第1引数に変数x、第2引数に関数fを取り、受け取った関数fに第1引数xを引数として渡して実行し、その結果を返す関数aを定義
function a(x, f) {
    return f(x);
}

//この関数aの使い方
//関数aの第1引数に数値の1を渡し、第2引数に引数をインクリメントして返す関数を渡してa関数を呼ぶ
console.log(a(1, function (x) {
    x++;
    return x;
    }
));

//結果は2となります。

これは実行する順番があるときにも有用です。
先に関数aの何らかの処理を実行した上で、引数で渡した関数を実行させる事ができます。
JavaScriptの関数を変数に代入できるという特徴から、色々なテクニックが生まれているのが面白いですね。

公開日：2017年12月06日