5.1 基本コンセプト
高階関数は関数型プログラミングの重要な要素で、JavaScriptで広く使われているよ。 これらはコードをもっと抽象的でコンパクト、再利用可能に書けるようにしてくれる。
高階関数って何?
高階関数 (higher-order functions) とは、他の関数を引数として受け取ったり、関数を結果として返す関数のことだね。 これにより、関数を第一級オブジェクトとして使えるから、もっと抽象的でモジュール化されたプログラムを作れるんだ。
高階関数の例
- 関数を引数として渡す。
- 他の関数から関数を返す。
5.2 関数を引数として渡す
配列の組み込みメソッドを使う
JavaScriptには、配列を操作するためのたくさんの組み込みメソッドがあるよ。これらは高階関数で、forEach(), map(), filter(), reduce()などがそうだね。
1. forEach() メソッド
forEach() メソッドは、指定した関数を配列の各要素に対して一度ずつ実行するよ。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});
// 表示する: 1 2 3 4 5
2. map() メソッド
map() メソッドは、配列の各要素に対して指定した関数を呼び出した結果を使って新しい配列を作るんだ。
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
return number * number;
});
console.log(squaredNumbers);
// 表示する: [1, 4, 9, 16, 25]
3. filter() メソッド
filter() メソッドは、渡された関数で設定した条件を満たす要素だけを含む新しい配列を作るんだ。
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
return number % 2 === 0;
});
console.log(evenNumbers);
// 表示する: [2, 4]
4. reduce() メソッド
reduce() メソッドは、配列の各要素に対して関数を適用し、1つの値にまとめるよ（左から右に向かって）。
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, number) {
return total + number;
}, 0);
console.log(sum);
// 表示する: 15
5.3 他の関数から関数を返す
高階関数は他の関数を返すことができるよ。それにより、もっと柔軟で設定可能な関数を作れるんだ。
1. カリー化 (Currying)
カリー化とは、複数の引数を取る関数を、1つの引数を取る関数とし、次の引数を取る新しい関数を返すように変換するプロセスなんだ。
カリー化の例:
function multiply(a) {
return function(b) {
return a * b;
};
}
const multiplyByTwo = multiply(2);
console.log(multiplyByTwo(5)); // 表示する: 10
const multiplyByThree = multiply(3);
console.log(multiplyByThree(5)); // 表示する: 15
2. カスタマイズ可能な関数の作成
高階関数は、引数を使ってカスタマイズできる関数を作成することができるよ。
例:
function createGreeting(greeting) {
return function(name) {
console.log(`${greeting}, ${name}!`);
};
}
const sayHello = createGreeting('Hello');
sayHello('Alice'); // 表示する: Hello, Alice!
const sayHi = createGreeting('Hi');
sayHi('Bob'); // 表示する: Hi, Bob!
5.4 実際の応用
高階関数の実用的な応用を見てみよう。
compose() 関数
compose() 関数は、いくつかの関数を1つにまとめ、それらを連続して適用する関数を作るためのものだよ:
function compose(...functions) {
return function(initialValue) {
return functions.reduceRight((value, func) => func(value), initialValue);
};
}
const addOne = x => x + 1;
const double = x => x * 2;
const addOneAndDouble = compose(double, addOne);
console.log(addOneAndDouble(5)); // 表示する: 12 (最初に5に1を足し、その結果を2倍する)
非同期高階関数
非同期高階関数は、APIのリクエストやタイマーの操作など、非同期オペレーションで役立つんだ:
function fetchData(callback) {
setTimeout(() => {
callback('データ受信');
}, 1000);
}
function processData(data) {
console.log(data);
}
fetchData(processData);
// 表示する: データ受信 (1秒後)
GO TO FULL VERSION