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

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

ラムダ関数（Lambda Function）とは、単一の式のみで構成される小さな匿名関数（無名関数）のことです。1つまたは複数の引数を受け取ることができ、関数そのものを他の関数へ引数として渡すことを可能にします。

JavaScriptでは関数が「オブジェクト」として扱われるため、関数を別の関数に渡したり、戻り値として返したりすることができます。この性質を利用することで、ラムダ関数を実現できます。特にES6（ECMAScript 2015）で導入されたアロー関数を使えば、簡潔で読みやすい形でラムダ式を記述できます。

本記事では、アロー関数を用いて配列の各要素を2乗するラムダ処理を、具体的なサンプルコードとともに解説します。

サンプルコード：アロー関数によるラムダの実装例

以下のコードでは、squareというアロー関数を定義し、それをarraySq関数の引数として渡しています。これにより、配列の各要素が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;
    }
    .sample,
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>Lambdas with Arrow Functions in JavaScript</h1>
<div class="sample">[1,2,3,4,5,6,7]</div>
<div class="result"></div>
<br />
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to square the array above</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let sampleEle = document.querySelector(".sample");
    let resEle = document.querySelector(".result");
    let arr = [1, 2, 3, 4, 5, 6, 7];
    let square = (item) => item * item;
    function arraySq(func, arr) {
        let newArr = [];
        arr.forEach((element) => {
            newArr.push(func(element));
        });
        resEle.innerHTML = "The new array = " + newArr;
    }
    BtnEle.addEventListener("click", (event) => {
        arraySq(square, arr);
    });
</script>
</body>
</html>

このコードのポイントは以下の通りです。

  • アロー関数によるラムダ定義：(item) => item * item のように、1つの式だけで構成された短い匿名関数を変数 square に代入しています。
  • 高階関数への受け渡し：arraySq(func, arr) は関数を第1引数として受け取る高階関数です。ここに square を渡すことで、処理内容を柔軟に差し替えられます。
  • イベントリスナーでの活用：ボタンのクリックイベントでもアロー関数を使用しており、ラムダ的な記述が随所で役立っていることが分かります。

実行結果

ページを表示すると、元の配列 [1,2,3,4,5,6,7] が赤色で表示されます。

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

「CLICK HERE」ボタンをクリックすると、各要素が2乗された新しい配列 [1,4,9,16,25,36,49] が出力されます。

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

まとめ

JavaScriptでは関数が第一級オブジェクトとして扱われるため、アロー関数と組み合わせることで、ラムダ関数を直感的かつシンプルに記述できます。コールバック処理や配列操作（map・forEachなど）の場面で頻繁に活用されるテクニックなので、ぜひマスターしておきましょう。

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

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

  2. JavaScriptのcall()とapply()で関数を呼び出す方法をわかりやすく解説

    JavaScriptには、関数の呼び方を柔軟に制御できるメソッドとして call() と apply() が用意されています。どちらも「this」の値を指定しながら関数を実行できる点は共通していますが、引数の渡し方が異なります。 call() と apply() の違い call(): 引数を個別の値（カンマ区切り）として渡します。 apply(): 引数を配列（または配列風オブジェクト）として一括で渡します。 それでは、実際に両方のメソッドを使って関数を呼び出すサンプルコードを見てみましょう。 サンプルコード <!DOCTYPE html> <html lang=ja>