JavaScript Arrow関数を使用する方法といつ使用します

ES2015標準では、JavaScriptに矢印関数が導入されました。矢印関数には標準関数よりも単純な構文がありますが、それらの動作にはいくつかの重要な違いがあることもわかります。

JavaScript Arrow関数とは何ですか？

矢印関数は、いくつかの例外を除いて、ほぼどこでも標準関数式を使用できます。それらはコンパクトな構文を持ち、標準関数と同様に、引数リスト、本体、および可能な返品値を持っています。

以下で詳細に矢印関数を調べますが、一般的には、新しいものが必要なときはいつでも避けるべきです this バインディング。矢印関数には独自の機能がありません this;彼らは継承します this 外側の範囲から。

矢印関数は、コンストラクターまたはジェネレーター機能としても使用できません。 yield 声明。

JavaScript矢印関数の基本的な構文は何ですか？

矢印関数は、引数のリストで構成され、その後に矢印が続きます（等しいサインとより大きなサインで作られています（=>）、機能本体が続きます。これは、単一の引数をとる矢印関数の簡単な例です。

const greet = name => {
  console.log(`Hello, ${name}!`);
};

オプションでは、括弧で引数を囲むこともできます。

const greet = (name) => {
  console.log(`Hello, ${name}!`);
}

矢印関数に複数の引数が必要な場合、括弧が必要です。標準関数のように、引数名はコンマで区切られます。

const sum = (a, b) => {
  return a + b;
}

匿名 矢印関数 名前はありません。これらは通常、コールバック関数として渡されます。

button.addEventListener('click', event => {
  console.log('You clicked the button!');
});

矢印機能本文が単一のステートメントである場合、巻き毛の装具さえ必要ありません。

const greet = name => console.log(`Hello, ${name}!`);

暗黙のリターンとJavaScript矢印関数

JavaScript矢印関数と標準関数の重要な違いの1つは、 それはリターンを意味します：使用せずに値を返す return 声明。

矢印の関数から巻き毛の装具を省略すると、関数本文の式の値は機能から返されます。 return 声明。再訪しましょう sum 以前から機能。これは、暗黙の返品を使用するように書き直すことができます。

const sum = (a, b) => a + b;

コールバック関数を作成する場合、暗黙のリターンは便利です。

const values = [1, 2, 3];
const doubled values = values.map(value => value * 2); // [2, 4, 6]

暗黙的にオブジェクトを返す

暗黙の返品で必要なあらゆる種類の価値を返すことができますが、オブジェクトを返したい場合は、少し追加のヘルプが必要です。オブジェクトのリテラルはカーリーブレースを使用するため、JavaScriptは巻き毛のブレースを関数本体として解釈します。この例を考えてみましょう。

const createUser = (name, email) => { name, email };

この場合、暗黙のリターンはなく、関数は実際に戻ります undefined ないので return 声明。オブジェクトを暗黙的に返すには、オブジェクトを括弧で包む必要があります。

const createUser = (name, email) => ({ name, email });

JavaScriptは、これがを含むオブジェクトの暗黙の返品であることを知っています name そして email プロパティ。

明示的なリターンとJavaScript矢印関数

標準関数と同様に、矢印関数は値を明示的に返すことができます return 声明：

const createUser = (name, email) => {
  return { name, email };
};

JavaScript矢印関数が標準関数とは異なります

矢印関数は、他の方法で標準関数とは異なる動作をします。

いいえ this バインディング

最も重要な違いは、標準関数とは異なり、矢印関数が this 独自の結合。次の例を考えてみましょう。

const counter = {
  value: 0,
  increment: () => {
    this.value += 1;
  }
};

だから increment メソッドは矢印関数です this 価値 関数では、を参照しません counter 物体。代わりに、外側を継承します this、この例では、グローバルウィンドウオブジェクトになります。

ご想像のとおり、電話する場合 counter.increment()、それは変わりません counter.value。その代わり、 this.value そうなるでしょう undefined 以来 this ウィンドウを指します。

時には、これを有利に使用できます。外側が欲しい場合があります this 関数内からの値。これは、コールバック関数を使用する場合の一般的なシナリオです。矢印が機能する前に、電話する必要があります bind 特定のものを強制する関数について this、またはあなたは次のようなパターンに従っているかもしれません：

var self = this;
setTimeout(function() {
  console.log(self.name);
}, 1000);

矢印機能を使用すると、 this 囲まれた範囲から：

setTimeout(() => console.log(this.name));

いいえ arguments 物体

標準関数では、を参照できます arguments オブジェクトには、関数呼び出しに渡された引数に関する情報を取得します。これは、すべての引数値を保持する配列のようなオブジェクトです。過去には、これを使用してバリアン性関数を書くことができたかもしれません。

これを考慮してください sum さまざまな数の引数をサポートする関数：

function sum() {
  let total = 0;
  for (let i = 0; i 
You can call sum with any number of arguments:
sum(1, 2, 3) // 6

実装する場合 sum 矢印関数として、ありません arguments 物体。代わりに、RESTパラメーターの構文を使用する必要があります。
const sum = (...args) => {
  let total = 0;
  for (let i = 0; i 
You can call this version of the sum function the same way:
sum(1, 2, 3) // 6

もちろん、この構文は矢印関数に固有のものではありません。使用できます RESTパラメーター構文 標準機能もあります。私の経験で モダンなJavaScript、私は本当に見えません arguments もはや使用されているオブジェクトなので、この区別は論争のポイントになる可能性があります。
プロトタイプはありません
標準のJavaScript関数にはaがあります prototype 財産。の導入前 class 構文、これがオブジェクトを作成する方法でした new：
function Greeter() { }
Greeter.prototype.sayHello = function(name) {
  console.log(`Hello, ${name}!`);
};

new Greeter().sayHello('Joe'); // Hello, Joe!

矢印関数でこれを試してみると、エラーが発生します。これは、矢印関数にはプロトタイプがないためです。
const Greeter = () => {};
Greeter.prototype.sayHello = name => console.log(`Hello, ${name}!`);
// TypeError: Cannot set properties of undefined (setting 'sayHello')

JavaScript Arrow関数と標準関数を使用するタイミング
矢印関数は多くのシナリオで使用できますが、標準関数式を使用する必要がある状況がいくつかあります。これらには以下が含まれます：

クラスのコンストラクター
オブジェクトメソッドがオブジェクトにアクセスする必要があります this 価値
特定のものに明示的にバインドする必要がある関数 this で値 Function.prototype.bind
含むジェネレーター関数 yield ステートメント

矢印機能は、非常に顕著な構文のために、コールバック関数として使用すると特に輝きます。特に、それらは次のような配列方法に非常に役立ちます forEach、 map、 そして filter。あなた できる それらをオブジェクトメソッドとして使用しますが、メソッドが使用してオブジェクトにアクセスしようとしない場合にのみ this。
矢印関数は、特定の状況で非常に役立ちます。しかし、ほとんどのことと同様に、矢印関数には、正しく使用しないと潜在的な落とし穴があります。





矢印関数を使用してメソッドを定義する方法
矢印関数を使用してメソッドを定義する方法は次のとおりです。
class Person {
  constructor(name) {
    this.name = name;
  }

  greet = () => console.log(`Hello, ${this.name}!`);
}

リテラルのオブジェクトのメソッドとは異なり、以前に見たように、 this 値 – ここに greet メソッドはそれを取得します this 囲いからの価値 Person 実例。次に、メソッドがどのように呼ばれても、 this 価値は常にクラスのインスタンスになります。標準的な方法を使用するこの例を考えてみましょう setTimeout：
class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
      console.log(`Hello, ${this.name}!`);
  }

  delayedGreet() {
      setTimeout(this.greet, 1000);
  }
}

new Person('Joe').delayedGreet(); // Hello, undefined!

いつ greet メソッドはから呼び出されます setTimeout 電話、それ this 値はグローバルウィンドウオブジェクトになります。 name プロパティはそこに定義されていないので、あなたは得るでしょう Hello, undefined! あなたが電話するとき delayedGreet 方法。
定義する場合 greet 代わりに矢印関数として、それはまだ囲みます this から呼び出された場合でも、クラスインスタンスに設定します setTimeout：
class Person {
    constructor(name) {
      this.name = name;
    }

    greet = () => console.log(`Hello, ${this.name}!`);

    delayedGreet() {
        setTimeout(this.greet, 1000);
    }
}

new Person('Joe').delayedGreet(); // Hello, Joe!

ただし、コンストラクターを矢印関数として定義することはできません。試してみると、エラーが発生します。
class Person {
  constructor = name => {
    this.name = name;
  }
}

// SyntaxError: Classes may not have a field named 'constructor'
結論
ES2015標準の到着以来、JavaScriptプログラマーはツールボックスに矢印機能を搭載しています。それらの主な強さは、短縮された構文です。あなたは必要ありません function キーワード、そして暗黙の返品では必要ありません return 声明。
aの欠如 this バインディングは混乱を引き起こす可能性がありますが、囲いを保存したい場合にも便利です this コールバックとして渡された場合の別の関数に値。
この配列操作のチェーンを検討してください。
const numbers = [1, 2, 3, 4]
  .map(function(n) {
    return n * 3;
  })
  .filter(function(n) {
    return n % 2 === 0;
  });

これはうまく見えますが、少し冗長です。矢印機能を使用すると、構文はクリーナーです。
const numbers = [1, 2, 3, 4]
  .map(n => n * 3)
  .filter(n => n % 2 === 0);

矢印関数にはありません arguments オブジェクトですが、RESTパラメーターの構文をサポートしています。これにより、さまざまな数の引数を使用する矢印関数を簡単に構築できます。
矢印関数の主な利点は、読みやすさの向上と異なるものです this あなたが外側を維持する必要がある特定の状況で生活を楽にする行動。 this 価値。