コールバック関数 - JavaScript入門

JavaScriptのコールバック関数と高階関数

JavaScriptでは、関数はオブジェクトの一種である。
そのため、関数の引数を関数とすることもできます。
そして、関数を引数にとる関数を高階関数といいます。
逆に、関数に引数として渡される関数をコールバック関数といいます。

↓はコールバック関数のイメージです。

真ん中の白い関数は、引数の一つとして黄色い丸のfunctionを受け取っています。
つまり、真ん中白い関数が高階関数で、黄色い丸のfunctionがコールバック関数です。

高階関数とコールバック関数の例

JavaScriptで、高階関数とコールバック関数の例を一つ示します。

function f (a, b, callback) {
    return callback(a, b);
}

function add (a, b) {
    return a + b;
}

function sub (a, b) {
    return a - b;
}

console.log(f(2, 3, add)); // (A)
console.log(f(2, 3, sub)); // (B)

関数fを定義していて、fは引数としてcallbackを受け取り、関数内でcallbackを呼び出しています。
ここで、関数fは高階関数であり、callbackはコールバック関数です。

下二行(A)と(B)でfを呼び出しています。
引数のコールバック関数には、それぞれaddとsubを渡しています。

これを実行した結果を示します。

5
-1

(A)では、コールバック関数としてaddを渡したため、2+3=5が出力されました。
先に示した画像でいうと、真ん中の白い関数がfで、黄色い丸のfunctionがaddです。

(B)では、コールバック関数としてsubを渡したため、2-3=-1が出力されました。
先に示した画像でいうと、真ん中の白い関数がfで、黄色い丸のfunctionがsubです。

コールバック関数は非同期処理で使われる

JavaScriptでは、非同期処理において、コールバック関数がよくつかわれます。

非同期処理では、処理の完了を待たずにほかの処理が実行されます。
ただ、非同期処理の結果を使いたい場合等、非同期処理の完了を待ってから何か処理を行いたいこともあります。
このような場合に、非同期関数にコールバック関数を渡しておきます。
そうすることで、非同期処理はその処理の完了後に、渡されたコールバック関数を実行します。
こうすることで、非同期処理の完了後に何かしらの処理を実行できます。

setTimeoutの例

setTimeoutを使った例を示します。
setTimeoutは一定時間後に、引数に渡したコールバック関数を呼び出します。
setTimeoutによってほかの処理は待たされずに、非同期処理を行います。

setTimeout(() => {
    console.log("hello callback!");
}, 1000);

1000ms後つまり1秒後に、console.logが呼び出されます。

終わり