こんにちは!今日はアロー関数の表記を短くする話です。

アロー関数は色々省略できる

どうやら「アロー関数」で検索して辿り着く人が多いようなので、 前書いた記事の要点だけまとめます!

アロー関数は従来型の表記に比べ色々省略できます。

1足すだけの関数「plus1」を例に、従来型の表記とアロー関数を用いた最近の表記を見比べてみましょう:)

従来

var puls1 = function(n){
  return n + 1;
};

最近

const plus1 = n => n + 1

6つの省略(変更)ポイント

関数式

変更: varをconstにした

条件: 特になし

備考: varは今は使用不可くらいに思って大丈夫です:)

引数

変更: ()を省略

条件: 引数が1つの時のみ

備考: 引数が2つ以上のときは1つのオブジェクトにまとめるといいかも

関数

変更: functionを=>にした

条件: 特になし

備考: thisの扱いが変わります。詳しくはググろう!vueではこれ使いにくい

スコープ

変更: {}を省略

条件: スコープの中に文が0個、かつ式が1個。また式がオブジェクトでない

備考: スコープもオブジェクトも{}なので戻り値がオブジェクトなら({})こうする

return

変更: returnを省略

条件: スコープの中に文が0個、かつ式が1個。また式がオブジェクトでない

備考: =>の次に来た式をreturnするって考えるとわかりやすい:)

セミコロン

変更: ;を省略

条件: 特になし

備考: セミコロン省略派がここ数年で台頭した(気がする)

最後に

Arrow function is beautiful.