みなさんこんにちは。
現在学習中のJavaScriptのコールバック関数にて、「引数に関数を入れるってどう言う事？」 と思ったので、言語化も兼ねて、今回の記事の作成に至りました。
本記事では、JavaScriptの「コールバック関数」という用語の深掘りではなく、「なぜ関数を引数に渡せるのか？」 という疑問を解消することを目的にしています。
この記事を読んでコードの理解の助けになれば幸いです。
また、違う点等ございましたら、コメントを残していただく事をお願いいたします。
関数も値である
JavaScriptでは、関数も数値と文字列と同じように「値」として扱う事ができます。
このように関数を値として扱える性質を、ファーストクラスオブジェクト と呼びます。
この時点では「？」が頭に浮かびますが、やっていることはとてもシンプルです。
変数に値を入れる場合
const sampleInt = 1;
const sampleString = "文字列";
これは、変数に1 や"文字列"という値入れている例です。
変数に処理(関数)を入れる場合
const sampleFunction = (text) => {
console.log(text);
}
これは、sampleFunctionという変数に 「文字を表示する処理」 を入れている例です。
(注釈)正確には「無名関数(名前を持たない関数)」を変数に代入しています。
関数を引数に渡す
では本題です。
やっていることは「値を引数に渡す」ときと同じで 渡しているのもが"値"か"関数"かの違いだけ です。
値を引数に渡す
function double(x) {
console.log(x * 2);
}
double(5); // 10
上の例では、5という値をxに渡し、その値を使って処理しています。
同じように、関数も引数として渡す事ができます。
関数を引数に渡す
function runTwice(fn) {
fn();
fn();
}
runTwice(() => console.log("Hello"));
// Hello
// Hello
この場合、fnという引数には 「Helloを表示する処理」 が入っています。runTwice内でfn()を2回呼び出すと、その処理が2回実行されます。
関数を引数に渡すメリット
関数を引数に渡すと、処理の内容を呼び出し側で自由に差し替えられるようになります。
runTwice(() => console.log("こんにちは"));
// こんにちは
// こんにちは
runTwice(() => console.log("Goodbye"));
// Goodbye
// Goodbye
このように 「何をするか」を後から指定できるため、
- イベント処理（ボタンをクリックしたときの動き）
- 非同期処理（APIの結果を受け取った後の動き）
など、さまざまな場面で活用されます。
さいごに
JavaScriptの基礎ですが、これを理解するとイベント処理や非同期処理などにも応用できるため、しっかりと押さえておきたいポイントです。
この記事を通して、 「関数も値である」 という考え方や、 関数を引数に渡す意味 が少しでもクリアになったなら嬉しいです。