JavaScriptでArrow関数を覚えることのメリット

ECMAScriptのバージョン

バージョンと機能を俯瞰するにはWikipediaの表が一番わかりやすいです。
https://ja.wikipedia.org/wiki/ECMAScript

Arrow関数はES6(ES2015)から採用されています。

非同期関数 (async/await)はES2017から採用ですね。

ちなみにNodejsのversion6ではES2017は動かないので注意です。
Node.jsは最新版を採用しましょう。

www.kennejs.com

Arrow関数

関数の書き方が簡略化される

最新のライブラリやWebチュートリアルなどはArrow関数で書かれていることが多いため、覚えておくと後々の学習コストが下がるのでおすすめです。

MDNのReferenceがわかりやすいです。

// 通常の関数
let usdPrice = function(jpyPrice, rate){
return jpyPrice * rate;
}
// arrow関数　… ①
let usdPrice = (jpyPrice, rate) => {
jpyPrice * rate
};
// arrow関数①と同じ
let usdPrice = (jpyPrice, rate) => jpyPrice * rate;
// arrow関数　… ②引数がないとき(jpyPrice, rateが不要)
let jpyPrice = 100, rate = 100;
let usdPrice = () => jpyPrice * rate;
console.log(usdPrice())

みたいな書き方ができます。

基本的な文法は頭にいれておくとコードが読みやすくなります。
ある程度読めるようになってきたタイミングで自分も書いてみると理解が深まると思います。

bind(this)

書き方も簡単になりますが、thisのbindの仕方も変わります。

this.lastPrice = 1000;
//通常のfunction()の書き方ではオブジェクトが参照される
let getLastPriceJPY = function(){
console.log(this.lastPrice)
}
//arrow関数()の書き方では宣言時点（この時点での）オブジェクトが参照される
let getLastPriceUSD = () =>{
console.log(this.lastPrice)
}
let jpyPrice = {
//通常のfunction()の書き方ではオブジェクトが参照される
lastPrice : 10000,
func : getLastPriceJPY
}
let usdPrice = {
lastPrice : 100,
func : getLastPriceUSD
}
jpyPrice.func();
usdPrice.func();

ビットコインを購入するならBITPOINT