先生と生徒の会話形式で理解しよう

生徒

「先生、高階関数って何ですか？なんだか難しそうです…」

先生

「高階関数とは、『関数を引数にしたり、関数を返したりする関数』のことです。簡単に言うと、『関数を操作できる関数』ですね。」

生徒

「関数を引数にするってどういう意味ですか？」

先生

「例えば、関数に別の関数を渡して、その関数の処理を変えたり、実行したりできることです。JavaScriptにはそういう便利な関数がたくさんありますよ。」

生徒

「具体的にはどんなものがあるんですか？」

先生

「有名なのが map、filter、reduce という配列に使う高階関数です。これらを使うと、配列のデータを簡単に加工できますよ。」

1. 高階関数とは？

高階関数（こうかいかんすう）とは、関数を引数に受け取ったり、関数を結果として返したりする関数のことです。プログラミング初心者には少し難しく聞こえますが、要は「関数を扱う関数」と覚えましょう。

JavaScriptでは、関数は「値」として扱えます。なので、他の関数の中に関数を渡したり、戻り値として関数を返すことができます。

例えば：


function sayHello() {
  console.log("こんにちは");
}

function executeFunction(func) {
  func();
}

executeFunction(sayHello); // こんにちは

ここでは、executeFunctionという関数に、sayHelloという関数を渡して実行しています。

2. mapメソッドとは？

mapは配列の要素を「一つずつ関数で変換して、新しい配列を作る」ための高階関数です。

例えば、数字の配列のすべての値を2倍にしたい時、普通ならループで書きますが、mapなら簡単にできます。


const numbers = [1, 2, 3, 4];
const doubled = numbers.map(function(num) {
  return num * 2;
});
console.log(doubled); // [2, 4, 6, 8]

ここで渡している関数は「numを2倍にして返す関数」です。mapはこれを配列の全要素に適用して新しい配列を返します。

3. filterメソッドとは？

filterは配列の要素を「条件に合うものだけ集めて新しい配列を作る」高階関数です。

例えば、数字の配列から偶数だけを取り出したいときに使います。


const numbers = [1, 2, 3, 4, 5, 6];
const evens = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evens); // [2, 4, 6]

渡した関数は「偶数かどうか」を判定しています。trueを返した要素だけが残ります。

4. reduceメソッドとは？

reduceは配列の要素を一つにまとめる（例えば合計や積を出す）高階関数です。

例えば、配列の数字を全部足し合わせるときに使います。


const numbers = [1, 2, 3, 4];
const sum = numbers.reduce(function(accumulator, current) {
  return accumulator + current;
}, 0);
console.log(sum); // 10

ここで accumulator は「これまでの合計」、current は「今の数字」です。初めの値は 0 で、順番に足しています。

5. まとめて使う例

これらを組み合わせると、配列のデータを便利に加工できます。例えば、数字を2倍にして偶数だけ集めて合計を出す例です。


const numbers = [1, 2, 3, 4, 5];

const result = numbers
  .map(num => num * 2)
  .filter(num => num % 2 === 0)
  .reduce((sum, num) => sum + num, 0);

console.log(result); // 20

まず2倍にして、偶数だけにして、その合計を求めています。