【JavaScript】コールバック関数とは何かを実例で分かりやすく解説(初心者向け)

コールバック関数は、JavaScriptで処理の実行タイミングを制御するために不可欠な技術です。ですが、その名称自体が馴染みがなく、なんとなく難しい印象を与えます。

実際に、コールバック関数の解説を読んでみるとcallbackという言葉が複数でてきて、結局なんとなくしかわからないということに陥りやすいです。

この記事では、コールバック関数とは何か？が具体的にわかるように実例のコードで解説しています。

コールバック関数とは何か？

コールバック関数とは、ある関数を呼び出す際に、引数として渡す他の関数のことです。

コールバック（callback）とは、折り返し電話をかけることです。つまり、応答に対して応答を返すことで呼び返しとも呼びます。

プログラミングでは、呼び出した関数が、他の関数を更に呼び返す形になるため、コールバック関数と呼びます。

コールバック関数の実例

コールバック関数を実例で見てみましょう。

以下のコードがある場合に「secondProcess」という関数が、firstProcess関数の中で呼び出すコールバック関数になります。

// (1) 呼び出す関数を定義する
function firstProcess(message, callback) {
    console.log(`初期メッセージ: ${message}`);
    
    //コールバック関数の実行
    callback();
}

// (2) コールバック関数の定義
function secondProcess() {
    console.log("コールバック関数を実行しました");
}

//関数の呼び出し
firstProcess("一つ目の関数を実行しました", secondProcess);

コールバック関数を理解するポイント

コールバック関数を理解する上でよく間違いを引き起こすのは、最初に呼び出す関数の引数名で「callback」などの名前がつけられていることです。

先ほどのコードのfirstProcessの第２引数に「callback」と記載してありますが、この時点でこのcallbackはコールバック関数ではありません。ただの引数です。

// (1) 呼び出す関数を定義する
function firstProcess(message, callback) {}

また、上記コードで(2)のコールバック関数として呼び出す関数を定義している以下の時点では、この関数はまだコールバック関数ではありません。ただの関数です。

// (2) コールバック関数の定義
function secondProcess() {
    console.log("コールバック関数を実行しました");
}

コールバック関数になるのは以下のコードです。

//関数の呼び出し
firstProcess("一つ目の関数を実行しました", secondProcess);

関数を呼び出したときに、引数で関数を指定することで初めてコールバック関数になります。

（補足1）関数の呼び出し時にコールバック関数に引数を渡せない

関数を呼び出すときに、引数でコールバック関数の引数を指定することはできません。

//以下はNG
firstProcess("一つ目の関数を実行しました", secondProcess(data));

コールバック関数に引数を渡す場合は、最初に呼び出した関数の中の処理で記述する必要があります。

function firstProcess(message, callback) {
    console.log(`初期メッセージ: ${message}`);
    
    //コールバック関数の実行
    let log = "２つ目の関数を実行しました！"
    callback(log);
}


function secondProcess(log) {
    console.log("ログ:" + log);
}

//関数の呼び出し
firstProcess("一つ目の関数を実行しました", secondProcess);

（補足2）高階関数とコールバック関数

関数を呼び出したときに、引数で他の関数を指定するとそれがコールバック関数になります。

その際、最初に呼び出した関数を「高階関数 (Higher-Order Function)」と呼びます。