【JavaScript】コールバック関数とは何か？普通の関数との違い｜使い方を実例で解説

JavaScriptのドキュメントを読んでいると頻繁に「コールバック関数」という単語に出くわします。

コードの記述自体ややっていることはとても簡単なのですが、「コールバック関数」と言われるとなんとなく難しいもののような気がします。

ここでは、コールバック関数とは何か？を実例を用いて解説しています。

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

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

コールバック関数は、渡された関数の内部で特定のタイミングで呼び出されます。これにより、非同期処理やイベント駆動型プログラミングが可能になります。

JavaScriptの基本的なメソッドは処理の中に関数を記述するため、メソッドの中の関数を「コールバック関数」と呼ぶということです。

例えば、filter関数の基本構文は以下のようになっています。

filter(callbackFn)
filter(callbackFn, thisArg)

引数の中が「callbackFn（コールバック関数）」になっています。

実際のfilterの記述は以下のようになり、関数処理が記述されています。この引数の中の関数がコールバック関数です。

const result = words.filter((word) => word.length > 6);

コールバック関数をアロー関数で記述する（メソッドの場合）

コールバック関数はfunctionでも記述することもできますが、最近はアロー関数で記述することが一般的です。

引数が1つの場合

例えば、mapメソッドをfunctionを使って記述すると以下のようになります。このfunctoin～の部分がコールバック関数です。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function (number) {
  return number * 2;
});

console.log(doubled);

これをアロー関数で書き換えると次のようになります。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);

console.log(doubled);

引数が２つ以上の場合

引数が2つ以上ある場合は、引数の部分を()で囲みます。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map( ( elem, index ) => elem * index);

console.log(doubled);

処理が複数行の場合

処理が複数行になる場合は { } を使います。

const doubled = numbers.map( ( elem, index ) => { 
    val = elem + 1;
    res = val * index;
    console.log( elem * index );
    return res
})
    
console.log(doubled);