JavaScript
矢印関数

前書き

構文

• x => y //暗黙のリターン

• x => {return y} //明示的な戻り値

• （x、y、z）=> {...} //複数の引数

• async（）=> {...} // Asyncの矢印関数

• （（）=> {...}）（）//直ちに呼び出される関数式

• const myFunc = x

  => x * 2 //矢印の前の改行で '予期しないトークン'エラーがスローされます

• const myFunc = x =>

  x * 2 //矢印の後の改行は有効な構文です

備考

前書き

JavaScriptでは、関数は "矢印"（ => ）構文を使用して匿名で定義されます。これは、 Common Lispの類似性のためにラムダ式と呼ばれることがあります。

最も簡単な矢印関数の形式は、 =>左側に引数があり、右側に戻り値があります。

item => item + 1 // -> function(item){return item + 1}

この関数は、式に引数を指定するとすぐに呼び出すことができます。

(item => item + 1)(41) // -> 42

矢印関数が単一のパラメーターを取る場合、そのパラメーターのまわりのかっこはオプションです。たとえば、次の式は同じ型の関数を定数変数に代入します 。

const foo = bar => bar + 1;
const bar = (baz) => baz + 1;

ただし、矢印関数にパラメータがない場合、または複数のパラメータが指定されている場合は、新しいカッコがすべて引数を囲む必要があります。

(() => "foo")() // -> "foo"

((bow, arrow) => bow + arrow)('I took an arrow ', 'to the knee...')
// -> "I took an arrow to the knee..."

関数本体が単一の式で構成されていない場合は、角括弧で囲み、明示的なreturn文を使用して結果を提供する必要があります。

(bar => {
  const baz = 41;
  return bar + baz;
})(1); // -> 42

矢印関数の本体がオブジェクトリテラルのみで構成されている場合、このオブジェクトリテラルはかっこで囲む必要があります。

(bar => ({ baz: 1 }))(); // -> Object {baz: 1}

余分な括弧は、開始および終了の括弧がオブジェクトリテラルの一部であることを示します。つまり、関数本体の区切りではありません。

レキシカルスコープ＆バインディング（ "this"の値）

矢印関数は字句的にスコープされています。これは、 this Bindingが周囲のスコープのコンテキストにバインドされていることを意味します。それは何でも、言うことですthis矢印の機能を使用して保存することができることをいいます。

次の例を見てください。 Cowクラスには、1秒後に出力されるサウンドを出力するメソッドがあります。

class Cow {

  constructor() {
    this.sound = "moo";
  }

  makeSoundLater() {
    setTimeout(() => console.log(this.sound), 1000);
  }
}

const betsy = new Cow();

betsy.makeSoundLater();

makeSoundLater()メソッドでは、 thisコンテキストはCowオブジェクトの現在のインスタンスを参照します。したがって、私がbetsy.makeSoundLater()を呼び出す場合、 thisコンテキストはbetsy参照しbetsy 。

矢印関数を使うことで、 thisコンテキストを保存して、 "moo"を正しくthis.soundするようにthis.soundときにthis.soundを参照できるようにします。

arrow関数の代わりに通常の関数を使用した場合、クラス内にあるというコンテキストが失われ、 soundプロパティに直接アクセスできなくなります。

引数Object

矢印関数は引数オブジェクトを公開しません。したがって、 argumentsは単に現在のスコープ内の変数を参照するだけです。

const arguments = [true];
const foo = x => console.log(arguments[0]);

foo(false); // -> true

このため、矢印機能も呼び出し元/呼び出し先を認識しません 。

いくつかのエッジケースでは、引数オブジェクトの欠如が制限になることがありますが、一般に、残りのパラメータは適切な代替方法です。

const arguments = [true];
const foo = (...arguments) => console.log(arguments[0]);

foo(false); // -> false

暗黙のリターン

Arrow関数は、本体に単一の式しか含まれていない場合、伝統的に関数の本体をラップする中括弧を単純に省略することで、暗黙的に値を返すことがあります。

const foo = x => x + 1;
foo(1); // -> 2

暗黙のリターンを使用するときは、オブジェクトのリテラルをカッコで囲む必要があります。そのため、中括弧は関数の本体が開いていると誤解されません。

const foo = () => { bar: 1 } // foo() returns undefined
const foo = () => ({ bar: 1 }) // foo() returns {bar: 1}

明白なリターン

Arrow関数は、 returnキーワードを使用して明示的に値を返すことができる点で、古典的関数と非常によく似た動作をすることができます。単に関数の中身を中括弧で囲み、値を返します。

const foo = x => {
  return x + 1;
}

foo(1); // -> 2

矢印はコンストラクタとして機能する

Arrow関数は、 newキーワードとともに使用するとTypeErrorをスローします。

const foo = function () {
  return 'foo';
}

const a = new foo();

const bar = () => {
  return 'bar';
}

const b = new bar(); // -> Uncaught TypeError: bar is not a constructor...