Arrow Functions In Javascript

Arrow Functions – “fat arrow” function とも呼ばれ、比較的新しい方法で JavaScript で簡潔な機能を記述することが可能です。 ECMAScript 6 の仕様で導入され、それ以来 ES6 で最も人気のある機能になっています。 アロー関数では、ファットアロー => 演算子を使って、パラメータの有無にかかわらず、JavaScript の関数を素早く定義することができます。 新しいJavaScript関数を作成する際に、中括弧やfunction、returnキーワードを省略し、より短い関数構文を記述することができるのです。

この記事では、矢印関数を作成するための実際のシナリオをいくつか見てみましょう。 以下の例では、ECMAScript 5 構文が関数式を宣言し、それを変数 birthday に代入しています。 これは、コンソールに “Happy birthday!” という単純なテキスト文字列を出力します。

row function syntax において、中括弧および function と return キーワードは削除されました。 これで、関数全体は 1 行で済みます。 空の括弧は関数にパラメータがないことを示し、太い矢印は関数本体を（現在存在しない）パラメータに結合します。

One Parameter

前の例を、1 つのパラメータ、特に name で拡張しましょう。 古い ES5 構文は 1 つのパラメータを取り、その値を返す文字列に追加します。

矢印関数構文は本質的に同じことを行います。 太い矢印の前の括弧で名前パラメータを囲み、関数ブロックの return キーワードを省略する必要があります。

Two Parameters

望むだけのパラメータの矢印関数を使うことができるのです。 例えば、以下は同じ例で、年齢と名前という2つのパラメータを持つものです。 さて、birthday()関数は、文字列を返すために2つの入力を必要とします。 まず、ECMAScript 5 を使用してみましょう。

、新しい ES6 notation で同じコードを見てみましょう。

Object Literals

また、矢印関数構文を使用して、ユーザーがオブジェクト リテラルの値を設定するための設定を宣言することができます。 以下の setBirthday() 関数では、誕生日を持つ人の名前と年齢を設定できます。

arrow function notation を使用すると、同じセッター関数がわずか 1 行で定義可能です。

Array Manipulation

Array の操作にも、同様に、矢印関数を使って JavaScript 配列を処理することができる。 たとえば、それぞれ名前と年齢のプロパティを持つ 3 つのオブジェクト リテラルを含む persons 配列を見てみましょう。

JavaScript の組み込み map() メソッドは配列のあらゆる要素で同じ関数をコールできるようにしています。 従来の ES5 記法を使用すると、次のようにすべての人の名前プロパティを返すことができます:

row function notation で、1 行で同じタスクを実行することが可能です。

When Not To Use Arrow Functions

arrow function には多くの使用ケースがありますが、いくつかの制約も存在します。 4428>

最も重要なことは、矢印関数を使用してコンストラクターを作成できないことです。 new キーワードを太い矢印構文と一緒に使用すると、コンソールでエラーがスローされます。 これは、JavaScript が矢印関数をオブジェクト メソッドと同じように扱うために起こります。 その結果、JavaScriptオブジェクトの本質的な特性である独自のメソッドを持つことができません。 さらに、矢印関数はこれを異なる方法で扱うので、this キーワードを使用するメソッドを含むオブジェクト リテラルおよびコールバック関数を宣言するために ES6 構文を使用することはできません。 太い矢印構文は多くの使用例があるため、すぐに JavaScript コミュニティのお気に入りの ES6 機能となりました。 一貫して使用される場合、新しいコンパクトな記法は多くの時間と帯域幅を節約し、コードの読みやすさを向上させます。

お読みいただきありがとうございました。