JavaScriptを学んでいると、「高階関数（Higher-Order Function）」という少しイカツイ言葉に出会いませんか？漢字が多くて難しそうに感じますが、実は皆さんもすでに使っているかもしれない、とても直感的で便利な機能です。
1. 高階関数って結局なに？
一言でいうと、高階関数とは「関数を引数として受け取る」または「関数を戻り値として返す」関数のことです。
JavaScriptでは、関数もただの「データ（値）」として扱えます。そのため、数値や文字列を変数に入れるように、関数そのものを別の関数にポンッと渡すことができるのです。（この渡される側の関数を「コールバック関数」と呼びます）。
2. よく使う高階関数の代表例：配列メソッド
JavaScriptで最もよく使われる高階関数は、配列（Array）を操作するメソッドたちです。
パターンA：.map() （変換する）
配列のすべての要素に対して「渡された関数」を実行し、新しい配列を作ります。
const ingredients = ['🥩', '🥔', '🍗', '🌽'];
// cook（調理）という関数を、map（高階関数）に渡す
const meals = ingredients.map(function(item) {
if (item === '🥩') return '🍔';
if (item === '🥔') return '🍟';
if (item === '🍗') return '🍗(揚)';
if (item === '🌽') return '🍿';
});
console.log(meals);
// 結果: ['🍔', '🍟', '🍗(揚)', '🍿']
パターンB：.filter() （絞り込む）
配列の中から、「渡された関数」の条件に合う（trueになる）ものだけを集めて新しい配列を作ります。
const allMeals = ['🍔', '🍟', '🍗(揚)', '🍿'];
// 「ベジタリアン向けか？」を判定する関数をfilterに渡す
const vegetarianMeals = allMeals.filter(function(food) {
return food === '🍟' || food === '🍿';
});
console.log(vegetarianMeals);
// 結果: ['🍟', '🍿']
3. なぜ高階関数を使うの？
「わざわざ関数に関数を渡さなくても、for文を使えばいいのでは？」と思うかもしれません。もちろん for 文でも同じ処理は書けますが、高階関数を使うと次のようなメリットがあります。
- 何をしているかが一目でわかる
for文は「どうやって処理するか（How）」を書きますが、.map()や.filter()は「何をするか（What）」が明確になります。コードがそのまま「意味」を表すようになります。 - コードが短く、バグが減る
変数の初期化（let i = 0など）や、新しい配列への追加（.push()）といったお決まりの記述を省略できるため、タイプミスによるバグが激減します。
4. 自分で高階関数を作ってみよう
組み込みのメソッドを使うだけでなく、自分でもオリジナルの高階関数を作ることができます。
// 高階関数：指定した回数だけ、渡された「タスク（関数）」を実行する
function repeat(times, task) {
for (let i = 0; i < times; i++) {
task(i); // ここで受け取った関数を実行！
}
}
// 渡す関数（コールバック）その1
function sayHello() {
console.log("こんにちは！");
}
// 実行してみる（sayHello関数を引数として渡す）
repeat(3, sayHello);
// 出力: こんにちは！ / こんにちは！ / こんにちは！
上司（repeat）が「3回やっておいて」と指示を出し、部下（sayHello）が具体的な作業を行うイメージですね。
高階関数は、JavaScriptのコードを美しく、そして読みやすくするための強力な武器です。まずは .map() や .filter() を積極的に使うところから始めてみてください。