はじめに

アロー関数？書けるよ。あまり理解してないけどって人向けに具体的な使用例の一部をお伝えする記事です。
アロー関数とは、

アロー関数式は、より短く記述できる、通常の function 式の代替構文です。また、this, arguments, super, new.target を束縛しません。アロー関数式は、メソッドでない関数に最適で、コンストラクタとして使うことはできません。

つまり従来より簡潔に書けるし明瞭な構文で書けるってこと。
ちなみに関数とメソッドの違いは、

単独で 呼び出せるのが関数

myfunc(); <- こんな形の奴

単独で 呼び出せないのが関数

var str = 'user1,user2,user3';

var result = str.split(','); <- メソッド

従来の関数の書き方との書き換え方

引数の値を2倍にして返り値で返す関数で例えると、

従来の書き方

index.js

functiondoubleUp(num){returnnum*2;}

アロー関数で書き換えた書き方その1

index.js

constdoubleUp=(num)=>{returnnum*2;}

アロー関数で書き換えた書き方その2.0 (引数が一つの場合に限る)

index.js

constdoubleUp=num=>{returnnum*2;}

アロー関数で書き換えた書き方その2.1 (引数が一つ以上の場合)

index.js

constdoubleUp=(a,b)=>a*b;

アロー関数で書き換えた書き方その3.0 (関数の処理が returnで一行の場合に限る)

index.js

constdoubleUp=num=>num*2;

アロー関数で書き換えた書き方その3.1 (関数の処理が returnで一行以上の場合)

index.js

constdoubleUp=num=>{alert('hoge');returnnum*2;}

アロー関数と無名関数の挙動って一緒なの？

結論から言うと一緒じゃない。
関数内で this を使う場合は挙動が変わってくるんじゃい。
以下の関数を見るんじゃい。

index.js

letperson={age:"30",callName:function(){console.log(this.age);//"30" が出力されるwindow.setTimeout(function(){console.log(this.age)// undefined が出力される},1000);}};

console.log(this)で両方とも出力してもらえればわかると思うんじゃい。
window に関してはそもそも callName というオブジェクトがないんじゃい。
なので参照しようとすると undefined になるんじゃい。

しかし上記のようなオブジェクトにおいてageプロパティをwindow.setTimeout...内で使用したいというケースはよくあるケース。

ではどうするかというと、こうする。

やり方その１

index.js

letperson={age:"30",callName:function(){console.log(this.age);//  "30" が出力されるwindow.setTimeout(function(){console.log(this.age)//  "30" が出力される}.bind(this),1000);}};

bind()は引数とされている this と callName直下のスコープ内にある this を同じものとする機能があるんじゃい。
- やり方その2

index.js

letperson={age:"30",callName:function(){console.log(this.age);//"30" が出力されるlethoge=this;window.setTimeout(function(){console.log(hoge.age)//"30" が出力される},1000);}};

hoge変数にpersonオブジェクトのスコープを代入してあげるんじゃい。

やり方その3

index.js

letperson={age:"30",callName:function(){console.log(this.age);//"30" が出力されるwindow.setTimeout(function(){console.log(this.age)//"30" が出力される}.call(this),1000);}};

callメソッドを使うんじゃい。

やり方その4

index.js

letperson={age:"30",callName:function(){console.log(this.age);//"30" が出力されるwindow.setTimeout(()=>{console.log(this.age)//"30" が出力される},1000);}};

アロー関数を使うんじゃい。
アロー関数内を使うと、アロー関数内でthisが定義されないんじゃい。
javascriptの性質上, アロー関数内でthisを見つけられない場合スコープチェーンを辿って
上の階層に同じ変数名のものを探すんじゃい。

最終的にグローバル変数まで探して見つかれなければ undefined を返すんじゃい。
こういう使い方があるんじゃい。

以上じゃい。

ps:
こういうやり方もあるよ〜」とかあれば教えて欲しいんじゃい。
勉強になるんじゃい。