ES2015のarrow functionを雑にまとめておく

JavaScript復習2017 - importとuse strictとメソッド定義 - - あーありがち(2017-02-19)

ではあえてほとんど省略していた arrow function の自分向けメモ。

参考 13. Arrow functions

自分のバックグラウンド

CoffeeScriptは割と好き。

  • 全部「式」になるのは圧倒的に正しい
  • 特に spec を書く際に function() {} じゃなくて -> だけでサクッと書けたのは本当によかった
  • インデント? 普通守るでしょ

arrow functionのメリット

なんといっても function() {} というクソ長い文字列を見なくてよくなる

これでようやくテストのためだけに CoffeeScript が恋しくなることはなくなる。

this を気にしなくてよくなる

「気にしなくてよい」は非常に曖昧な表現だが、心理的には事実。より正確な言い方をすると Function と arrow function はスコープの扱いが異なる。

JavaScript の this は非常にやっかいな存在で、JavaScript の function はこの this を惑わす元凶なのに JavaScript では普通の function も class も function でかつ callback を使いまくるという地獄のような仕様になっていた。

var self = this

みたいなコードがそこら中に書かれてしまうのはそういう理由だ。これが arrow function では this は他の変数同様レキシカルに決まる。arrow function の中と外で this は同じものを指すことになる。

Ruby のブロックのようにかなりカジュアルに function が使えるようになったと言ってよいと思う。

arrow functionの注意点

() の省略がビミョい

() は「引数が1つの時だけ」省略できる。これが CoffeeScript のように「引数があれば省略できる」と思うとハマる。

() の省略なんてなかったんやと思った方が間違いにくいと思う。

{} の省略がビミョい

{} は省略できるが省略すると意味が変わる。

() => { statement }
() => expression

{} を省略すると return を省略できる。逆に言うと return を省略するためには {} が省略できなければいけないが、そうすると長い処理は書きにくいというか事実上は書けなくなる。

{} の省略なんてなかったんやと思った方が間違いにくいと思う。

※ どっちも短ければ短い方がよい例文では使ってしまうんだなぁ。

参考

13. Arrow functions

More