矢印関数

概要

ES 6から矢印関数が導入された.functionというキーワードと括弧は省略できます.

✔申functionキーワードは省略可能

✔申関数にパラメータが1つしかない場合（）カッコは省略できます

✔申関数本体に1つの式しかない場合、括弧を省略できます。return

常に匿名関数

𘚠𘚠は、新しい生成者と一緒に使用できません。これがないから。

const f1 = function() { return 'hello!'; }
// 위 아래 코드는 동등한 결과 출력
const f1 = () => 'hello!';

functionを省略し、「hello」、{}のみを出力し、returnをスキップできます.

const f2 = function(name) { return `Hello, ${name}!`; }
// 위 아래 코드는 동등한 결과 출력
const f2 = name => `Hello, ${name}! `;

f 2はパラメータで、nameは1つしかありません.したがって、カッコ(name)を省略し、{}とreturnをスキップします.

const f3 = function(a, b) { return a + b; }
// 위 아래 코드는 동등한 결과 출력
const f3 = (a, b) => a + b;

パラメータがa,bの2つある場合は()は省略できないが,関数,{},returnは省略できる.

thisと矢印関数

矢印関数では、thisは静的にバインドされています.これは別の定義はありません.したがって,外部はこの点を参照する.

let group = {
  title: "group1",
  students: ["david", "lucas", "henderson"],

  showList() {
    this.students.forEach(
      student => alert(this.title + ': ' + student)
    );
  }
};

group.showList();

矢印関数のthisは、外部コードブロックshowList()関数のthisです.title in groupタイトルを指します.

let group = {
  title: "group1",
  students: ["david", "lucas", "henderson"],

  showList() {
    this.students.forEach(function(student) {
      // TypeError: Cannot read property 'title' of undefined
      alert(this.title + ': ' + student)
    });
  }
};

group.showList();

一般関数でアクセスすると、これ.titleは定義されていません.
リファレンス
1)JavaScript(光メディア)の学習
2) https://ko.javascript.info/arrow-functions-basics
3) https://ko.javascript.info/arrow-functions