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

JavaScriptの高階アロー関数とは？基本概念と実装例をわかりやすく解説

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

このように、JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれており、変数やオブジェクト、配列などに自由に格納できます。高階アロー関数（Higher Order Arrow Functions）は、関数を引数として受け取る、関数を返す、あるいはその両方を行うことができる関数のことです。

高階アロー関数のサンプルコード

以下は、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");
    let 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>

実行結果

ページを表示すると、元の配列 [22, 33, 44, 55] が確認できます。

JavaScriptの高階アロー関数とは？基本概念と実装例をわかりやすく解説

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

JavaScriptの高階アロー関数とは？基本概念と実装例をわかりやすく解説

コードのポイント

  • doubleNum：受け取った数値を2倍にして返すシンプルなアロー関数です。
  • doubleArray(arr, fn)：配列と関数を引数として受け取る高階関数です。内部で forEach を使い、各要素に対して渡された関数を適用しています。
  • ボタンのクリックイベントもアロー関数で定義されており、結果を画面に出力します。

このように、高階関数を活用することで、処理のロジックを柔軟に差し替えられる再利用性の高いコードを書くことができます。

  1. JavaScriptのアロー関数を使ってラムダ（無名関数）を実装する方法

    ラムダ関数（Lambda Function）とは、単一の式のみで構成される小さな匿名関数（無名関数）のことです。1つまたは複数の引数を受け取ることができ、関数そのものを他の関数へ引数として渡すことを可能にします。JavaScriptでは関数が「オブジェクト」として扱われるため、関数を別の関数に渡したり、戻り値として返したりすることができます。この性質を利用することで、ラムダ関数を実現できます。特にES6（ECMAScript 2015）で導入されたアロー関数を使えば、簡潔で読みやすい形でラムダ式を記述できます。本記事では、アロー関数を用いて配列の各要素を2乗するラムダ処理を、具体的なサンプルコ

  2. JavaScriptのアロー関数を使ってはいけない場面とは？オブジェクトメソッドでの落とし穴

    JavaScriptのアロー関数（矢印関数）は、コードを簡潔に書ける便利な構文ですが、あらゆる場面で使えるわけではありません。特にオブジェクトのメソッドとしてアロー関数を定義するのは避けるべきです。 その理由は、アロー関数には独自のthisが存在しないためです。アロー関数は、定義された場所を取り囲むレキシカルスコープからthisの値を受け取ります。グローバルスコープで定義した場合、そのthisはオブジェクト自身ではなくwindowオブジェクトを参照します。 その結果、本来なら対象オブジェクトのプロパティに対して行うはずの設定や参照が、誤ってwindowオブジェクトのプロパティに対して実行され