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
BITPOINT

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUT US

ケネ
はじめまして、ケネです。

Node.jsの技術情報を書いています。

一人でも多くの方と「自分でもできた」感覚を共有したいので、なるべくわかりやすく、実体験ベースでのブログを心がけています。
技術で自分の世界を広げましょう。

不明点や質問があればお気軽にコメントください。