アロー関数の基本

ES6から登場したアロー関数はWebでさらっと調べて用を足すという癖が強いハイスキルあるいはレイジーなエンジニアにとって、実は分かりにくかったりします。
そういう方（自分）向けに改めて整理しました。

関数の書き方

JavaScriptで関数は以下の２つがあります。
(Functionでの作成は問題を複雑にするので書いてません）

//関数宣言
function addNumber(x) {return x + x;}
//関数リテラル
var addNumber = funcion(x) { return x + x;}

アロー関数は上記のうちの関数リテラルに対する省略記法です。これ大事なとこなので覚えてください。
そういえば、関数って２種類書き方あったんだと、改めて感じた人は何かを書籍を購入してください。

アロー関数はコピってはいけない

以下にプログラムで順に書いていますが、引数が１つ、１つ以上、ない場合でカッコが省略されることがあります。また、returnだけだと、returnすら省略されます。
つまり、「アロー関数の書き方」でググって、既存の関数リテラルをさらっと書き直そうとすると、その著者の書き方のコピペでしかいつまでも書けません。そして、見つけるサイトはいつも変わる可能性があるので、結局いつまでもいろんなパターンのアロー関数をコピペでしか書けないという結果になります。

//教科書通りのアロー関数
var addNumber = (x) => {return x + x}

//引数が１つの場合はカッコを省略可能
var addNumber = x => {return x + x}

//return文だけの場合は波括弧とreturnが省略可能
var addNumber = x => x + x;

//引数がない場合
var addNumber = () => x + x;

関数リテラルとアロー関数は同義ではない

省略記法とは言いつつ、このことは認識が必要です。

1. コンストラクタとして使えない
2. yieldが使えない
3. thisの値が関数定義時に決定される

特に３つ目はググってすますような人にはかなり理解が難しいです。callやapplyを使って関数を呼び出している場合は特に注意が必要と覚えておいてください。