JavaScriptにおけるアロー関数と通常の関数の違いと使い方


アロー関数は、ES6(ECMAScript 2015)で導入された新しい関数の構文です。通常の関数と比較して、いくつかの重要な違いがあります。

  1. 構文の違い:

    • 通常の関数: functionキーワードを使用して関数を定義します。

      function add(a, b) {
      return a + b;
      }
    • アロー関数: =>(アロー演算子)を使用して関数を定義します。

      const add = (a, b) => a + b;
  2. thisの挙動の違い:

    • 通常の関数: 関数内でthisキーワードを使用すると、関数が呼び出されたコンテキストを参照します。
    • アロー関数: アロー関数内でthisキーワードを使用すると、関数が定義された時点での外部スコープのthisを参照します。つまり、アロー関数内のthisは静的に固定されます。
  3. argumentsの挙動の違い:

    • 通常の関数: argumentsオブジェクトを使用して関数に渡された引数にアクセスできます。
    • アロー関数: argumentsオブジェクトはアロー関数内で使用できません。代わりに、...argsのような残余引数を使用する必要があります。

アロー関数は、主に短くシンプルな関数を定義する場合に便利です。一方、通常の関数はより複雑なロジックを持つ関数を定義するために使用されます。

以下に、アロー関数と通常の関数の使用例を示します。

// アロー関数の使用例
const multiply = (a, b) => a * b;
// 通常の関数の使用例
function divide(a, b) {
  return a / b;
}

この記事では、アロー関数と通常の関数の違いと使い方について説明しました。アロー関数はシンプルな関数の定義に適しており、通常の関数はより柔軟な機能が必要な場合に使用されます。