ES6矢印関数を使用する必要がある場合(およびその理由)—使用しない場合

矢印関数(「太い矢印関数」とも呼ばれます)は、間違いなくES6の最も人気のある機能の1つです。彼らは簡潔な関数を書く新しい方法を導入しました。

ES5構文で記述された関数は次のとおりです。

function timesTwo(params) { return params * 2}function timesTwo(params) { return params * 2 } timesTwo(4); // 8

さて、これは矢印関数として表現された同じ関数です:

var timesTwo = params => params * 2 timesTwo(4); // 8

ずっと短いです!暗黙の戻り値のため、中括弧とreturnステートメントを省略することができます(ただし、ブロックがない場合のみ。これについては以下で詳しく説明します)。

矢印関数が通常のES5関数とどのように異なる動作をするかを理解することが重要です。

バリエーション

すぐに気付くのは、矢印関数で使用できるさまざまな構文です。一般的なもののいくつかを実行してみましょう:

1.パラメータなし

パラメータがない場合は、=>の前に空の括弧を置くことができます。

() => 42

実際、括弧も必要ありません!

_ => 42

2.単一のパラメーター

これらの関数では、括弧はオプションです。

x => 42 || (x) => 42

3.複数のパラメーター

これらの関数には括弧が必要です。

(x, y) => 42

4.ステートメント(式ではなく)

最も基本的な形式では、関数式は値を生成し、関数ステートメントはアクション実行します。

矢印関数では、ステートメントに中括弧を付ける必要があることを覚えておくことが重要です。中括弧が表示されたら、常に書く必要がありますreturn同様に。

ifステートメントで使用されるarrow関数の例を次に示します。

var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } }

5.「ブロックボディ」

関数がブロック内にある場合は、次の明示的なreturnステートメントも使用する必要があります。

var addValues = (x, y) => { return x + y }

6.オブジェクトリテラル

オブジェクトリテラルを返す場合は、括弧で囲む必要があります。これにより、インタプリタは括弧内の内容を評価するように強制され、オブジェクトリテラルが返されます。

x =>({ y: x })

構文的に匿名

矢印関数は匿名であることに注意することが重要です。つまり、名前が付けられていません。

この匿名性はいくつかの問題を引き起こします:

  1. デバッグが難しい

エラーが発生した場合、関数の名前または関数が発生した正確な行番号を追跡することはできません。

2.自己参照なし

関数が任意の時点で自己参照を持つ必要がある場合(たとえば、再帰、バインドを解除する必要があるイベントハンドラー)、関数は機能しません。

主な利点:「これ」の拘束力がない

従来の関数式では、thisキーワードは、呼び出されたコンテキストに基づいてさまざまな値にバインドされます。しかし、矢印の機能を使用すると、thisされる辞書的にバインド。これthisは、矢印関数を含むコードから使用することを意味します。

たとえば、次のsetTimeout関数を見てください。

// ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } };

ES5の例で.bind(this)は、thisコンテキストを関数に渡すためにが必要です。それ以外の場合、デフォルトでthisは未定義になります。

// ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } };

ES6の矢印関数はthisキーワードにバインドできないため、字句的にスコープを上に移動し、this定義されたスコープ内のの値を使用します。

矢印関数を使用すべきでない場合

矢印関数についてもう少し学んだ後、それらが通常の関数に置き換わるものではないことを理解していただければ幸いです。

おそらくそれらを使用したくないいくつかの例を次に示します。

  1. オブジェクトメソッド

と呼んcat.jumpsでも、命の数は減りません。これは、this何にもバインドされておらずthis、親スコープからの値を継承するためです。

var cat = { lives: 9, jumps: () => { this.lives--; } }

2.動的コンテキストを使用したコールバック関数

コンテキストを動的にする必要がある場合、矢印関数は正しい選択ではありません。以下のこのイベントハンドラーを見てください。

var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); });

ボタンをクリックすると、TypeErrorが発生します。これはthis、ボタンにバインドされておらず、代わりにその親スコープにバインドされているためです。

3.コードが読みにくくなる場合

前に説明したさまざまな構文を考慮する価値があります。通常の機能で、人々は何を期待するかを知っています。矢印機能を使用すると、見ているものをすぐに解読するのが難しい場合があります。

いつ使うべきか

矢印関数thisは、関数自体ではなく、コンテキストにバインドする必要があるものすべてに最適です。

それらは匿名であるという事実にもかかわらず、コードを読みやすくするため、mapやなどのメソッドで使用することも好きreduceです。私にとって、長所は短所を上回っています。

私の記事を読んでくれてありがとう、そしてあなたがそれを好きなら共有してください!Pomodoro Clockアプリの作成方法、その過程で学んだ教訓、JavaScriptの「new」キーワードをわかりやすく説明するなど、他の記事もご覧ください。