【JavaScript】コールバック関数とは？使い方と使い道をサンプルコード付きで紹介！

コールバック関数とは、他の関数に引数として渡される関数のことです

文字だけで説明されてもピンとこないかと思います。
僕はピンときてないです。

コールバック関数を知るためには、まずは基本的な関数の使い方はおさえておきましょう！

【JavaScript】関数とは？　プログラミングの基本的機能、関数の説明とその使い方

コールバック関数は、普通の関数と比べてちょっとだけ複雑。

一体なにができて、どのような使い方をするのでしょうか？

コールバック関数とは？
コールバック関数はいつ使うのか？

コールバック関数とは？

改めて、コールバック関数とは、他の関数に引数として渡される関数のことです。

コールバック関数の書き方は、このような感じです。

/* 無名関数ver */
const 変数名 = function(){
    何らかの処理;
    return 処理の結果;
}

/* アロー関数ver */
const 変数名 = ()=>{
    何らかの処理;
    return 処理の結果;
}

return 処理の結果; と記述することで、実行した関数そのものが結果の値に変身します。

さて、まだピンときませんね。
それではサンプルコードを見てみましょう。

サンプルコード

まずはコピペして結果を見てみましょう！

<script>
/* コールバック関数を必要とする関数 */
const hello = function(name, cb){
    const result = cb(name);
    console.log(result);
}

/* コールバック関数 */
const en = function(arg){
    return `Hello ${arg} !`;
}

hello('World', en);
</script>

関数「hello」は、第二引数である関数「cb」の引数に第一引数をセットして実行し、その結果をコンソールで出力する関数です。

コールバック関数「en」は、実行することで「Hello 引数 !」という値に変身する関数です。

先ほど書いた通り、コールバック関数は、実行した関数そのものが結果の値に変身します。

わざわざコールバック関数を使った理由は何でしょうか？

サンプルコードをグレードアップ！

先ほどのサンプルコードをさらにグレードアップさせました！

<script>
/* コールバック関数を必要とする関数 */
const hello = function(name, cb){
    const result = cb(name);
    console.log(result);
}

/* コールバック関数 */
const en = function(arg){
    return `Hello ${arg} !`;
}

const jp = function(arg){
    return `こんにちは、${arg}！`;
}

const cn = function(arg){
    return `你好${arg}！`
}

hello('World', en);
hello('世界', jp);
hello('世界', cn);
</script>

えふぃ

コールバック関数を増やして、関数「hello」の幅を広げることができました！

コールバック関数は、メインの関数のパーツとなるものです。
そのパーツを増やしていくことで、メインの活動領域が広がります！

サンプルコードをもいっちょ！

関数「calc」の第一引数と第二引数には数字が入ります。
そして第三引数にコールバック関数「plus」を入れると2つの数字の和が、コールバック関数「multiply」を入れると2つの積がコンソールに出力されます。

<script>
/* コールバック関数を用いて処理される関数 */
const calc = (x, y, callback) => {
    const result = callback(x, y);
    console.log(result);
};

/* コールバック関数「plus」 */
const plus = (n1, n2) => {
    return n1 + n2;
};

/* コールバック関数「multiply」 */
const multiply = (n1, n2) => {
    return n1 * n2;
};

calc(1, 2, plus);
calc(3, 4, multiply);
</script>