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

JavaScript入門：ファットアロー関数と簡潔なアロー関数の違いと書き方

簡潔なアロー関数（コンサイスアロー関数）とは、1行で完結する関数のために、太い矢印関数（ファットアロー関数）をより洗練させた記述形式のことです。関数の本体が1行のコードだけであれば、簡潔なアロー関数は暗黙的なreturnを備えているため、波括弧 {} で囲む必要がありません。さらに、引数が1つだけの場合は丸括弧 () も省略して書けますが、引数が存在しない場合には丸括弧が必須となります。

構文

ファットアロー関数：

let add = (a,b) =>{return a+b;}

簡潔なアロー関数：

let add = (a,b)=>a+b;

引数が1つだけの場合：

let add = a=>a+22;

以下は、JavaScriptにおけるファットアロー関数と簡潔なアロー関数の違いを比較したコード例です。

コード例

<!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>ファットアロー関数 vs 簡潔なアロー関数</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、add() 関数と multiply() 関数が呼び出されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let add = (a, b) => a + b;
    let multiply = (a, b) => {
       return a * b;
    };
    document.querySelector(".Btn").addEventListener("click", () => {
       resEle.innerHTML = "32 + 19 の合計 = " + add(32, 19) + "<br>";
       resEle.innerHTML =
       "32 × 19 の積 = " + multiply(32, 19) + "<br>";
    });
</script>
</body>
</html>

出力結果

JavaScript入門：ファットアロー関数と簡潔なアロー関数の違いと書き方

「ここをクリック」ボタンを押した後の表示：

JavaScript入門：ファットアロー関数と簡潔なアロー関数の違いと書き方


まとめ

このように、処理が1行で完結する場合は簡潔なアロー関数を使うことでコードがすっきりし、可読性が向上します。一方、複数行の処理や変数宣言を伴う場合には、波括弧を使った通常のファットアロー関数形式を選ぶのが適切です。

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

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

  2. JavaScriptの匿名ラッパー関数(IIFE)とは?使い方を徹底解説

    匿名ラッパー関数(Anonymous Wrapper Function)は、コードスニペットやJavaScriptライブラリ、個々の関数などを包み込むために使われる手法です。コードの可視性や名前空間(namespace)を制御することで、他のライブラリや外部スクリプトとの名前の衝突・競合を防ぐことができます。 この目的のために広く利用されているのが、IIFE(即時実行関数式：Immediately Invoked Function Expressions)です。IIFEは定義されたその場で即座に実行される関数式であり、関数内部で宣言された変数は外部からアクセスできないため、グローバル名前空間を