【JavaScript】高階関数 – 関数を引数、戻り値として扱う関数

JavaScriptの関数はオブジェクト型のインスタンスです。関数は他のオブジェクトと同じように振る舞います。変数として関数を格納することもできますし、関数を別の関数への引数として渡すこともできます。返り値として関数を返すこともできます。

ここでは、関数を引数、戻り値として扱う関数の高階関数を見ていくことにします。

高階関数の基本的な操作
まとめ

高階関数の基本的な操作

先ほども触れましたが、「関数を引数、戻り値として扱う関数」を高階関数と呼びます。

ここでは高階関数を使った基本的なコードを扱います。

各種の計算をまとめた巨大なまとまった関数を作って結果を得ることもできますが、良いやり方とは言えません。それぞれの各種計算を行う関数を作って、それらの結果を渡して最終的に利用する関数を作ります。

ここでは配列データと用意して、それを使って計算をする関数を作ります。

次のようにコードを書いてみます。

var years = [1970, 1960, 1935, 2001, 1988];

function arrayCalc(arr, fn) {
    var arrRes = [];
    for (var i = 0; i < arr.length; i++) {
        arrRes.push(fn(arr[i]));
    }
    return arrRes;
}

まず、yearsという配列を用意しています。5つの西暦の年を入れています。

配列を計算する関数としてarrayCalc()を定義しています。引数に配列（arr）と関数（fn）をとります。処理としては、空の配列arrResを用意して、これに処理したデータを入れていくことになりますが、それは、for文を使って、０から配列の長さ（arr,length）まで１づつ増やしてループします。関数に配列を利用した計算結果をpush()を使って、arrResに追加していき、最終的にreturnでarrResを返す関数になっています。

ここで引数としてfnと言う関数を与えていますが、これはあとで定義する関数となります。これを利用して使うのですが、コールバック関数とも言います。

次のような関数を定義してみます。

function calculateAge(el) {
    return 2019 - el;
}

年齢を計算する関数calclateAge()を定義しています。elは要素elementのことで、ここでは配列の年を利用して計算することになります。現在は2019年ですから、「2019 – el」を計算して返り値としています。

実際に先ほどの関数に渡して計算してみます。

var ages = arrayCalc(years, calculateAge);
console.log(ages);

ArrayCalc()に配列のyearsと関数のclcuateAgeを渡しています。コールバック関数なので引数として渡す関数には括弧()をつけません。

console.log()で計算した値を、JavaScriptコンソールに表示してみます。

順に年齢が計算されて、配列に格納されているのがわかります。

では、さらに関数を定義してみます。年齢による最大心拍数の計算をする関数をここでは考えてみることにします。

最大心拍数の推定方法は次のような計算になります。

＜最大心拍数の推定方法＞
最大心拍数＝206.9−（0.67×年齢）

これは18歳以上、81歳以下で考えます。（ただし、この計算値は個人差があるので注意）

これを使って次のように関数を定義してみます。

function maxHeartRate(el) {
    if (el >= 18 && el <= 81) {
        return Math.round(206.9 - (0.67 * el));
    } else {
        return -1;
    }
}

最大心拍数を求める関数をmaxHeartRate()としています。if-else文を使って、年齢の範囲での条件を判定しています。先ほどの計算値をreturnで返しています。ここではMath.round()を使って整数になるようにしています。年齢の幅に当てはまらない場合はelse文で-1を返すようにしています。

これも先ほどと同様に、最初に定義した関数に渡して計算してみます。

var ages = arrayCalc(years, calculateAge);
var rates = arrayCalc(ages, maxHeartRate);
console.log(ages);
console.log(rates);

年齢を計算した関数の結果を利用して、最大心拍数を求めています。

console.log()でJavaScriptコンソールに表示するとこうなります。

上側は年齢計算、下側は最大心拍数の配列となっているのがわかります。84歳のところは年齢の範囲外なので-1が返されているのがわかります。

最後にこれまでのコードをまとめておきましょう。

var years = [1970, 1960, 1935, 2001, 1988];

function arrayCalc(arr, fn) {
    var arrRes = [];
    for (var i = 0; i < arr.length; i++) {
        arrRes.push(fn(arr[i]));
    }
    return arrRes;
}

function calculateAge(el) {
    return 2019 - el;
}

function maxHeartRate(el) {
    if (el >= 18 && el <= 81) {
        return Math.round(206.9 - (0.67 * el));
    } else {
        return -1;
    }
}

var ages = arrayCalc(years, calculateAge);
var rates = arrayCalc(ages, maxHeartRate);
console.log(ages);
console.log(rates);

このように、最初に最終的に結果を生成する関数を定義しておき、単一の計算をする関数をそれぞれ別に定義しておくことで、一つに全てまとめた関数を定義するよりもコードが見やすくなるのがわかると思います。