この記事を読むとわかること
JavaScript初心者が高階関数(Higher-Order Functions)を理解できます。
高階関数 Higher-Order Functions とは
高階関数 Higher-Order Functions とは
高階関数とは、次のいずれかを実行する関数です。
- 関数を引数として扱う
- 関数を戻り値として扱う
高階関数を使うことのメリット
- 抽象化により、人間の読者が簡単に再利用、デバッグ、理解できる方法で複雑なコードを書くことができます
- 新しい変数に再割り当てするなど、他のタイプのデータと同じように関数を操作できます
- 機能のまとまりを細切れに保つことにより、テストが容易になります
第一級関数 first-class function とは
高階関数を理解する上でJavaScriptの関数の持つ基本の性質を知る必要があり、第一級関数 first-class function について触れておきます。
第一級関数とは、第一級オブジェクトとして扱うことのできる関数のことであり、JavaScriptがサポートしています。
第一級関数は他のすべての変数と同じように扱われます。 よってこれらを引数として関数に渡したり、他の関数から値として返したり、変数やデータ構造に割り当てたりすることができます。
第一級関数の複雑さ(関数の引数が関数..)に特に制限が設けられていない時，プログラミング言語が高階関数(higher-order function) をサポートしている、と表現できます。第一級関数は、高階関数のような形で日常的に用いられます。
以下は、関数を変数に割り当てる例です。
function greet(name) {
console.log('Hello ' + name)
}
greet(“John”) // “Hello John”
var sayHello = greet
sayHello(“Alex”) // “Hello Alex”
高階関数の例
以下にて高階関数の例を2つ見てみましょう。
1. 配列の内容を順に処理するforEachメソッド
以下は、配列の要素を順番に取り出すための高階関数です。
array.forEach(callback [,that])
// array : 配列オブジェクト
// callback : 個々の要素を処理するための関数
// 関数callbackの中でthisが示すオブジェクト
以下は処理用の関数として、配列の要素を二乗するコールバック関数です。
コールバック関数とは、呼び出し先の関数の中で呼び出される関数のことです。
この関数では配列の中身を受け取れるように引数value(要素の値),index(インデックス番号),array(元の配列)を指定する必要があります。ちなみにindex(インデックス番号),array(元の配列)は不要であれば省略可能です。
var data = [1, 2, 3, 4];
data.forEach(function(value,index,array){
console.log(value * value);// 結果 1, 4, 9, 16
});
2. 配列を指定されたルールで加工するmapメソッド
以下は、配列の要素を順番に取り出すための高階関数です。
array.map(callback [,that])
// array : 配列オブジェクト
// callback : 個々の要素を加工するための関数
// 関数callbackの中でthisが示すオブジェクト
以下は処理用の関数として、配列の要素を加工した結果をまとめて新たな配列として返すコールバック関数です。
この関数では配列の中身を受け取れるように引数value(要素の値),index(インデックス番号),array(元の配列)を指定する必要があります。
var data = [1, 2, 3, 4];
var result = data.map(function(value,index,array) {
return value * value ;
});
console.log(result); // 結果 : [1, 4, 9, 16]
上記の2例に共通して言える事ですが、高階関数から呼ばれるコールバック関数は自由に差し替える事ができます。 これこそが高階関数を使う理由です。
高階関数を使わない場合と使う場合の違い
元の配列の各値を2倍した新しい配列を作成するコードで違いを見てみます。
const arr1 = [1, 2, 3];
const arr2 = [];
for(let i = 0; i < arr1.length; i++) {
arr2.push(arr1[i] * 2);
}
// prints [ 2, 4, 6 ]
console.log(arr2);
const arr1 = [1, 2, 3];
const arr2 = arr1.map(function(item) {
return item * 2;
});
console.log(arr2);
参考情報
[Higher Order Functions]
(https://medium.com/functional-javascript/higher-order-functions-78084829fff4)
[Higher Order Functions in JavaScript]
(https://www.lullabot.com/articles/higher-order-functions-in-javascript)
[Higher-order functions in Javascript]
(https://dev.to/damcosset/higher-order-functions-in-javascript-4j8b)
[Understanding Higher-Order Functions in JavaScript]
(https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad)
[改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで]
(https://amzn.to/337hyku)