主な内容の要点
JavaScriptでは「関数」を変数に入れたり、関数に渡したり、関数から返したりできます。こうした仕組みを使うと「コールバック関数」や「高階関数」が扱えるようになり、非同期処理やイベント処理でとても役立ちます。
基本の考え方
- 関数もオブジェクト
→ 変数に代入できるし、引数として渡すことも可能。 - 高階関数
→ 「関数を受け取ったり返したりする関数」のこと。 - コールバック関数
→ 「引数として渡され、あとで呼び出される関数」のこと。
コード例で理解する
- 関数を変数に代入
const price = function(p) {
console.log("トマトの値段は " + p + "円です。");
};
price(100);
→ 関数を変数に入れて呼び出せる。
- 関数を引数に渡す（高階関数 + コールバック関数）
function tomato(price, func) {
const name = "トマト";
func(name, price);
}
const showPrice = function(name, price) {
console.log(name + "の値段は " + price + "円です。");
};
tomato(100, showPrice);
→ tomato が高階関数、showPrice がコールバック関数。
- 無名関数やアロー関数を直接渡す
tomato(100, (name, price) => {
console.log(name + "の値段は " + price + "円です。");
});
よく使われる場面
- 非同期処理
例：
console.log("Good Morning.");
setTimeout(() => {
console.log("Bye.");
}, 3000);
console.log("How are you?");
→ 3秒後に「Bye.」が出力される。待っている間も次の処理が進む。
- イベント処理
ボタンがクリックされたときに実行する処理をコールバック関数で指定できる。
初心者へのポイント
- 「関数はデータとして扱える」と覚えると理解しやすい。
- 高階関数は「関数を操作する関数」、コールバック関数は「あとで呼ばれる関数」とイメージするとよい。
- 非同期処理やイベント処理で必ず出てくるので、早めに慣れておくと後が楽になる。
👉 まとめると、JavaScriptの強みは「関数を柔軟に扱える」こと。これを理解すると、非同期処理やイベント処理がぐっと分かりやすくなります。