コールバックと高階関数 ― 関数を渡す

導入

JavaScript では、関数を値として変数に入れたり、他の関数に渡したりできます。渡された関数をあとから呼ぶパターンをコールバックと呼びます。

説明

関数は「値」です。別の関数の引数として渡せます。

function thrice(fn) {
  fn();
  fn();
  fn();
}

thrice(() => console.log("ピン"));

配列の forEach / map / filter は、まさにコールバックを受け取る高階関数です。

const names = ["太郎", "花子", "次郎"];
names.forEach((name, i) => {
  console.log(`${i + 1}. ${name}`);
});

タイマーでもコールバックが使われます（この実行環境では短時間の例のみ）。

// 同期的な「あとで呼ぶ」イメージを自作する
function later(message, fn) {
  console.log("準備:", message);
  fn();
}
later("完了処理", () => console.log("コールバック実行"));

やってみよう

thrice に別の処理を渡したり、forEach で好きな配列を表示したりしてみましょう。

演習

const nums = [10, 20, 30]; を forEach で1つずつ表示してください。