JavaScript 高階関数 Higher-Order Functions とは

この記事を読むとわかること

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メソッド

以下は、配列の要素を順番に取り出すための高階関数です。

配列の内容を順に処理する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メソッド

以下は、配列の要素を順番に取り出すための高階関数です。

配列を指定されたルールで加工する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)