ES2015のarrow functionを雑にまとめておく
JavaScript復習2017 - importとuse strictとメソッド定義 - - あーありがち(2017-02-19)
ではあえてほとんど省略していた arrow function の自分向けメモ。
自分のバックグラウンド
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 を省略するためには {} が省略できなければいけないが、そうすると長い処理は書きにくいというか事実上は書けなくなる。
{} の省略なんてなかったんやと思った方が間違いにくいと思う。
※ どっちも短ければ短い方がよい例文では使ってしまうんだなぁ。