JavaScriptのCallback関数って...何？

#はじめに

以前はPHPでシステム開発を行っていたので、その感覚でJavaScriptを触っていると
なかなか慣れることが出来ないそんな中、とあるデザインフレームワークのエラーハンドリングの解説に、
こんな感じ（下記）でAPIを使用してねと書いてありました。

rules: [{validator: function(value, callback)}]

これを見たとき、callback、、、んっ？となり、少し調べてロジック組んでみたけど動かない、、、。
どうやって使ったらよいの？とハマってしまった経験があるので、今回はコールバック関数について
記載しようと思います！（結果的にはコールバックでない箇所にハマっていたのですけど...）

#コールバック関数とは？

ウィキペディアによると、

コールバック（英: Callback）とは、プログラミングにおいて、
他のコードの引数として渡されるサブルーチンである。

他のコードのひきすうとしてワタサレるサブルーチン......ほほぅ..何？

もう1回ちゃんと調べてみたところ、コールバック関数とは、
「他の関数に渡して実行してもらうための関数」のことをコールバック関数とよびます。

例えば、
「ある関数Aに、この関数Bを渡しておくから、Aの処理が終わったら渡しておいた関数Bを実行してね」
というように使います。この関数Bがコールバック関数でした。

// コールバック関数B
const weather = () => {
    console.log("晴れ");
}

// コールバック関数を渡される関数A
const today = (callback) => {
    console.log('今日の天気は');
    callback();
}

today(weather);

// コンソールに「今日の天気は」「晴れ」と表示される

こう考えると、普段使っている「arr.map(callback)」や「arr.findIndex(callback)」
「arr.filter(callback)」など、callback関数を使っているのが分かりますね。

では、なぜ私がハマったのかというと...。

#そもそもJavaScriptの関数って...

JavaScriptをよく分かっていないがためにハマったのは実はココでして、、。
「JavaScriptの関数は、関数であり、変数に代入できるオブジェクトでもある」
ということをちゃんと理解していませんでした。

例えば下記のような関数の使い方であれば、PHPをやっていたのですんなり受け入れることが
出来ましたが、

function hoge() {
    console.log("hoge");
}

hoge();
// コンソールに「hoge」と表示される

JavaScriptでは関数はオブジェクトでもあったので、他の変数に入れることも出来ます。
（この感覚がなかった...）

function hoge() {
    console.log("hoge");
}
const hogehoge = hoge;

hogehoge();
// コンソールに「hoge」と表示される

結果はどちらも同じで「hoge」と表示されますが、ここで重要だったのが、

• 関数として実行する際は呼び出し側に「()」を付ける
• オブジェクトとして渡したりする際は「()」を付けない

ということでした。

私がハマったところ

私がハマったのはもうおわかりかもしれませんが、callback関数として値を渡さなければいけないところに、
下記のように()を付けてしまい、関数として実行していたため動かなかったというオチでした。。

 // 使い方
 // rules: [{validator: function(value, callback)}]

 // 下記の定義をした際に、
 rules: [{validator: checkValidate()}]  // ←この()が原因！！

 // エラーチェック関数
 const checkValidate = (value, callback) => {
    if (value === 'xxxx') {
        callback('エラーですよ！');
    } else {
        callback();
    }
 }

#おわりに

JavaScript...慣れてしまえばフロントエンドを自在に操作できるようになるので、
とっても便利な言語ですね。早く覚えていかなくては。

この記事が何かのお役に立てれば幸いです。