KDE BLOG

Webデザインやコーディングについて書いています

【JavaScript基礎】高階関数について

<目次>

高階関数とは何か

高階関数とは、引数もしくは戻り値が関数である関数のことをいいます。

JavaScriptでは関数もオブジェクトで、第一級オブジェクトです。
第一級オブジェクトは下記の性質を持っています。 - 変数やデータ構造に格納できる - 関数のパラメータ(引数)として渡すことができる - 関数の戻り値となることができる - プロパティやメソッドを持つことができる - 無名のリテラルとして表現できる(無名関数) - 動的(実行時)に生成できる …etc

ちなみに第一級オブジェクトである関数は第一級関数と呼ばれます。
詳しくはここでは触れませんが、第一級関数であることから関数型プログラミングを行うことができるのだそうです。

高階関数のメリット

高階関数のメリットとしては、同じパターンの処理を抽象化することができることです。
もう少し具体的に言うと、大枠の処理を定義しておいて、具体的な処理は個別に設定することができます。
そうすることでコードの分割ができ見通しがよくなる上にメンテナンス性もあがります。

サンプル

言葉だけではわかりにくいので実際に記述してみます。

下記のコードではwalkArrayという高階関数を定義しています。 walkArray関数は引数に与えられた配列aryの内容に対して、引数の関数funcを順番に実行する高階関数です。func関数はコールバック関数であるといえます。

引数に与えられたfunc関数にはユーザー定義関数showAllとsumをそれぞれ定義して実行させています。

showAll関数とsum関数には、高階関数walkArray定義時に、現在の配列のインデックス(i)、現在の処理対象の配列の要素(value)、配列自体(ary)を取得できるようにfunc関数実行時に引数に定義してあるので、 ユーザー定義関数定義時にも同じように引数を設定すれば使用できます。

// 高階関数を定義
function walkArray(ary, func) {
    for (var i = 0; i < ary.length; i++) {
        func(i, ary[i], ary);
    }
}

// 全表示
function showAll(i, value, ary) {
    console.log(`index: ${i}, value: ${value}, array: ${ary}`);
}

// 合計値表示
let result = 0;
function sum(i, value, ary) {
    result += value;
    if (i === ary.length - 1) {
        console.log(`合計値: ${result}`);
    }
}

// 配列定義
const data = [1, 2, 3];

walkArray(data, showAll); 
// ↓実行結果
// index: 0, value: 1, array: 1,2,3
// index: 1, value: 2, array: 1,2,3
// index: 2, value: 3, array: 1,2,3
                              
walkArray(data, sum); // 実行結果 合計値: 6

このようにユーザー定義関数を自由に差し替えることができるのが、ユーザー定義関数を使う最大の理由といえます。
ライブラリや、プラグインなどを作成するときに便利そうな気がします。 使いこなすことでグッとコーディングの幅が広がるでしょう。

参考