JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptの高階関数とは？基本概念とサンプルコードをわかりやすく解説

高階関数とは？

JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。

JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれ、変数・オブジェクト・配列などに自由に格納できるという特徴を持っています。そして、関数を引数として受け取る、戻り値として返す、あるいはその両方を行う関数のことを「高階関数（Higher Order Function）」と呼びます。

代表的な高階関数には、map()、filter()、reduce()、forEach()などがあります。これらを活用することで、処理の再利用性が高まり、簡潔で読みやすいコードを書けるようになります。

サンプルコード

以下は、JavaScriptで高階関数を使用した具体例です。「配列の各要素を2倍にする」という処理を、関数を引数として渡す形で実装しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .result {
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScriptの高階関数</h1>
<div class="sample">[22,33,44,55]</div>
<br />
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、配列の各要素が2倍になります</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function doubleNum(ele) {
        return ele * 2;
    }
    let arr = [22, 33, 44, 55];
    function doubleArray(arr, fn) {
        let doubleArr = [];
        arr.forEach((element) => {
            doubleArr.push(doubleNum(element));
        });
        return doubleArr;
    }
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "新しい配列 = " + doubleArray(arr, doubleNum);
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptの高階関数とは？基本概念とサンプルコードをわかりやすく解説

「CLICK HERE」ボタンをクリックすると、各要素が2倍になった新しい配列が出力されます。

JavaScriptの高階関数とは？基本概念とサンプルコードをわかりやすく解説

コードのポイント解説

  • doubleNum(ele)：1つの数値を受け取り、2倍にして返すシンプルなコールバック関数です。
  • doubleArray(arr, fn)：配列と関数を引数として受け取る高階関数です。forEach()で各要素に関数を適用し、結果を新しい配列として返します。
  • doubleArray(arr, doubleNum)：関数doubleNumをそのまま引数として渡している点が、高階関数の典型的な使い方です。処理内容を差し替えたい場合は、別のコールバック関数を渡すだけで済みます。

このように、高階関数を使いこなすことで、ロジックの分離と再利用が容易になり、保守性の高いJavaScriptコードを書くことができます。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

    JavaScriptでは、文字列・数値・真偽値などのプリミティブ型はその「値」に基づいて比較されます。一方、オブジェクト(ネイティブオブジェクトでも独自に定義したカスタムオブジェクトでも)は「参照」に基づいて比較されます。 「参照による比較」とは、複数のオブジェクトがメモリ上の同じ場所を指しているかどうかを判定するという意味です。つまり、プロパティの中身が完全に一致していても、別々に生成された2つのオブジェクトは等しいとみなされません。 押さえておきたいポイント プリミティブ型: 値が同じであれば == や === の比較で true になる オブジェクト型: 同じインスタンス(同一の参照