JavaScript基礎｜コールバック関数・高階関数・匿名関数の違いと使いどころ

🧠 ざっくり定義

🛠例え：ごはんを食べたあとにすること（片付け編）

誰かに「ごはん食べ終わったら片付けてね」とお願いしたいとする。
このとき、「ごはんを食べ終わったら◯◯する」という処理が条件付きの実行になる。

🍽 やりたいこと（共通処理）

function afterMeal(task) {
  const finishedEating = true; // ごはんを食べ終わったかどうか

  if (finishedEating) {
    task(); // ごはんを食べ終わったら、task（関数）を実行！
  }
}

ここでafterMealに渡される task は「あとで実行する関数」＝ コールバック関数
この afterMeal は「関数を引数で受け取って実行している」＝高階関数

✅ 実行してみる！

🧹 例1：皿を洗う

関数washDishesを作成して、コールバック関数としてafterMeal関数の引数として渡す。

function washDishes() {
  console.log("お皿を洗う");
}

afterMeal(washDishes); // → 「お皿を洗う」と表示される

• washDishes は コールバック関数
• afterMeal は 高階関数

先ほど作成した関数afterMeal(task)のtaskに、washDishes内の処理が渡っている。afterMealの関数内で行われるtask()の処理の中身は、washDishesの処理となる。

🔧 例2：匿名関数でその場でお願いする

afterMeal(function () {
  console.log("テーブルをふく");
});

これは 名前のない関数 ＝匿名関数（anonymous function）
その場でしか使わないから、名前はつけずに即座に実行させる。

🔁 コールバック関数 × 反復メソッド（forEach, map, filter）

コールバック関数は下記反復メソッド内で使われたりする。

.forEach() → 配列の各要素に繰り返し処理をする

・戻り値なし（配列を返さない）

const dishes = ["皿", "コップ", "スプーン"];

dishes.forEach(function(dish) {
  console.log(dish + " を洗う");
});

.map() → 配列の各要素を加工して新しい配列を作る

変換・加工して新しい配列を作ることができ、必ず戻り値が必要となる。

const dishes = ["皿", "コップ", "スプーン"];

const washedDishes = dishes.map(function(dish) {
  return dish + "（洗った）";
});

console.log(washedDishes);

.filter() → 条件に合うものだけを取り出す

条件に合う要素だけを抜き出す。戻り値はtrue/false（含めるか否か）を指定する。

const onlySpoons = dishes.filter(function(dish) {
  return dish.includes("スプーン");
});

console.log(onlySpoons);

📝 まとめ：JavaScriptでは「関数」を柔軟に扱えるのが特徴

「コールバック関数」「高階関数」「匿名関数」はセットでよく使用される。