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

JavaScriptの簡潔なアロー関数の書き方と実装例

簡潔なアロー関数とは

JavaScriptにおける簡潔な（コンサイス）アロー関数の構文は、次のようになります。

(param1, param2) => param1 + param2

この形式には function キーワードがなく、波括弧 {} で囲まれた関数本体もありません。パラメータと関数本体の間に => を置くだけで成立します。

さらに、パラメータが1つだけの場合は、丸括弧を省略して次のように書くこともできます。

param1 => param1 * 2

主な特徴

  • functionキーワード不要： 通常の関数宣言よりも短く記述できます。
  • 暗黙のリターン： => の直後に波括弧 {} を付けなければ、式の評価結果が自動的に戻り値として返されます。
  • 引数の省略記法： パラメータが1つのみの場合は丸括弧 () も省略できます。

これらの性質により、コールバック処理などを中心に、簡潔で読みやすいコードを書くことができます。

以下は、JavaScriptで簡潔なアロー関数を実装するサンプルコードです。

例（Example）

<!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 {
       font-size: 20px;
       font-weight: 500;
       color: blueviolet;
    }
</style>
</head>
<body>
<h1>Concise arrow functions</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to call the add() concise arrow function</h3>
<script>
    let resEle = document.querySelector(".result");
    let add = (a, b) => a + b;
    document.querySelector(".Btn").addEventListener("click", () => {
       resEle.innerHTML = "Sum of 32 and 19 =" + add(32, 19);
    });
</script>
</body>
</html>

このコードでは、add = (a, b) => a + b; という簡潔なアロー関数を定義しています。{} も return 文も使わずに、2つの引数の合計が自動的に返される点に注目してください。

出力結果（Output）

JavaScriptの簡潔なアロー関数の書き方と実装例

「CLICK HERE」ボタンをクリックすると、add() 関数が呼び出され、32 と 19 の合計が画面に表示されます。

JavaScriptの簡潔なアロー関数の書き方と実装例

  1. JavaScriptのアロー関数（太い矢印関数）とは？基本構文と使い方をわかりやすく解説

    アロー関数（太い矢印関数）とは 」という矢印のような記号を使うことから、「太い矢印関数（Fat Arrow Function）」とも呼ばれています。 従来のfunctionキーワードを使った定義と比べて記述が大幅に簡潔になるほか、thisの扱いがレキシカル（語彙的）になるという特徴があり、現代のJavaScript開発では広く使われています。 基本構文 アロー関数の基本構文は以下のとおりです。 { } 」を記述するだけです。また、処理が1行で済む場合は、波括弧（{ }）とreturn文を省略して、さらに短く書くこともできます。 a + b; サンプルコード 次のコードは、JavaScr

  2. JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

    ファーストクラス関数（第一級関数）とは？ JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。 このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。 さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。 ファーストクラ