アロー関数の書き方

アロー関数ではES6で追加された書き方で矢印のように記述してfunctionより短い構文で記述することができます

//2つの数字を足す関数
//function
const add = function (a, b) {
  return a + b;
};
//アロー関数
const add = (a, b) => {
  return a + b;
}

アロー関数を省略して書く

関数のBody部分が1つしかない場合returnを省略できます

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

引数が1つの場合は()を省略できます

//2倍にする関数
const double = (number) => 2 * number;
↓
const double = number => 2 * number;

配列の数字を２倍にして返す関数をfunctionとアロー関数で書いてみます

functionでは

const numbers = [10,20,30];
const doubleNumbers = numbers.map(function (number) {
  return 2 * number;
});

アロー関数では、引数が1つで関数のbody部分も1つなのでfunctionと比べてここまで短く書くことができます

const doubleNumbers = numbers.map(number => 2 * number);

アロー関数はthisを束縛しない

以下のコードを実行してみます

const team = {
  members: ['太郎', '花子'],
  teamName: '赤チーム',
  teamSummary: function () {
    return this.members.map(function (member) {
      return `${member}は${this.teamName}の所属です。`;
    });
  }
};

console.log(team.teamSummary);

理想とされる実行結果は以下ですが、

太郎は赤チームの所属です。
花子は赤チームの所属です。

実際は
Uncaught TypeError: Cannot read property 'teamName' of undefined
となってしまいます
なぜこうなってしまうかというとコールバック関数members.mapはteamとは別のところで実行されているため、
thisでteamを参照することができないためです

これをアロー関数で書いてみます

const team = {
  members: ['太郎', '花子'],
  teamName: '赤チーム',
  teamSummary: function () {
    return this.members.map(member => `${member}は${this.teamName}の所属です。`);
  }
};

console.log(team.teamSummary);

するとなぜかちゃんと

太郎は赤チームの所属です。
花子は赤チームの所属です。

と表示することができます
これはアロー関数は書く場所によってthisが決まるためです
アロー関数で書くことによって本来参照したいところのthisを参照することができます