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

JavaScriptのアロー関数（短縮関数）とは？thisの違いをサンプルコードで解説

JavaScriptのアロー関数（短縮関数）とは？

アロー関数は、ES2015（ES6）で導入された関数の新しい記法で、「速記関数」「短縮関数」とも呼ばれます。従来のfunctionキーワードを使った関数式と比べて、はるかに短く簡潔に関数を記述できるのが大きな魅力です。

アロー関数最大の特徴は、thisへの独自のバインディングを持たないという点です。通常の関数では呼び出され方によってthisの値が変わりますが、アロー関数の場合は定義された場所の外側のスコープ（周囲のコンテキスト）からthisを受け継ぎます。これにより、ネストした関数の中でthisが意図しない値を指してしまうトラブルを簡単に回避できます。

基本構文の比較

// 従来の関数宣言
function add(a, b) {
  return a + b;
}

// アロー関数なら1行で書ける
const add = (a, b) => a + b;

サンプルコード：thisの挙動の違いを確認する

次のコードは、オブジェクトのメソッド内で「通常の関数」と「アロー関数」を使った場合に、thisの参照先がどう変わるかを比較する例です。

Example

<!DOCTYPE html>
<html lang="en">
<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: 18px;
      font-weight: 500;
      color: rebeccapurple;
   }
</style>
</head>
<body>
<h1>Shorthand function in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to invoke arrow and normal function</h3>
<script>
   let resEle = document.querySelector(".result");
   let objYear, obj1Year;
   let obj = {
      name: "rohan",
      age: 20,
      birthday() {
         function birthYear() {
            objYear = new Date().getFullYear() - this.age;
         }
         birthYear();
      },
   };
   let obj1 = {
      name: "Shawn",
      age: 22,
      birthday() {
         let birthYear = () => {
            obj1Year = new Date().getFullYear() - this.age;
         };
         birthYear();
      },
   };
   document.querySelector(".Btn").addEventListener("click", () => {
      obj.birthday();
      obj1.birthday();
      resEle.innerHTML += " Without arrow function : Birth Year = " + objYear + " ";
      resEle.innerHTML += " With arrow function : Birth Year = " + obj1Year + " ";
   });
</script>
</body>
</html>

実行結果

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

JavaScriptのアロー関数（短縮関数）とは？thisの違いをサンプルコードで解説

「CLICK HERE」ボタンをクリックすると −

JavaScriptのアロー関数（短縮関数）とは？thisの違いをサンプルコードで解説

なぜ結果が異なるのか？

  • obj（通常の関数）の場合：birthdayメソッド内で定義されたbirthYearは、普通の関数として呼び出されます。この場合、内部のthisはグローバルオブジェクト（window）を指すため、this.ageはundefinedとなり、計算結果はNaNになります。
  • obj1（アロー関数）の場合：birthYearがアロー関数であるため、thisは外側にあるbirthdayメソッドのthis、つまりobj1自身を引き継ぎます。その結果、this.ageは正しく22を参照し、正しい生まれ年が計算されます。

アロー関数を使うメリット

  • 短いコールバック関数を非常に簡潔に記述できる
  • 処理が1つの式だけならreturn文を省略できる（暗黙のreturn）
  • thisがレキシカルに束縛されるため、bind()などが不要になる場面が多い

使用時の注意点

  • argumentsオブジェクトを持たない
  • new演算子でコンストラクタとして利用できない
  • prototypeプロパティを持たない
  • オブジェクトリテラルのメソッドとして直接定義すると、thisがそのオブジェクトを指さなくなるため注意が必要
  1. 【図解付き】JavaScriptにおけるオブジェクトの等価性をわかりやすく解説

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

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

    高階関数とは？JavaScriptでは、関数はオブジェクトとして扱われます。そのため、関数を別の関数に引数として渡したり、関数の戻り値として別の関数を返したりすることが可能です。JavaScriptの関数は「第一級関数（ファーストクラス関数）」と呼ばれ、変数・オブジェクト・配列などに自由に格納できるという特徴を持っています。そして、関数を引数として受け取る、戻り値として返す、あるいはその両方を行う関数のことを「高階関数（Higher Order Function）」と呼びます。代表的な高階関数には、map()、filter()、reduce()、forEach()などがあります。これらを活用す