ES2015 (ES6) で覚えておきたい構文 : アロー関数
最近本格的に ES2015 (ES6) を使うことが増えてきたので、「まだ昔ながらの JavaScript しか書けないよ〜」という人に、これだけ知っておくと ES6 の読み方が分かるようになるよ！という構文を紹介しておく。
今回は「アロー関数 (Arrow Function)」というものを紹介する。
アロー関数 Arrow Function とは
これまで書いていた function() {} という無名関数を、ES2015 では () => {} と書けるようになった。=> 部分が矢・矢印に見えるのでアロー関数と呼ぶ。
// 従来の関数式
var fn = function (x) { console.log(x); };
// 上のコードをアロー関数にするとこうなる
var fn = (x) => { console.log(x); };
// 関数の引数が1つの場合は引数部分のカッコが省略できる
// が、これが分かりづらくなる原因の一つだと思うので、
// カッコは必ず書くことにした方がいいと思う
var fn = x => { console.log(x); };
// 関数の引数がない場合、複数ある場合はカッコ必須
var fn = () => { console.log('hoge'); };
var fn = (x, y, z) => { console.log(x, y, z); };
// 関数が1つの return 文のみの場合は、ブレースと return キーワードを省略できる
// つまり以下の3つは等価
var fn = function(x, y) { return x + y; }
var fn = (x, y) => { return x + y; }
var fn = (x, y) => x + y;
// ただしオブジェクトを返す場合はカッコで囲まないとエラーになる
var fn = (x, y) => ( { result: x + y } );
カッコやブレースを付けない、カッコつけた書き方は分かりにくくなるので、僕はカッコ付けた方がカッコイイと思う (ダジャレ)。
this の解釈が従来と異なるとか、厳密な違いはまぁあるんだけど、クラス構文の中で使っている場合は this は必ずクラスのプロパティやクラスが持つメソッドになるのであんまり気にしてない。