【JS】アロー関数で短く省略できる6つの表記
こんにちは!今日はアロー関数の表記を短くする話です。
アロー関数は色々省略できる
どうやら「アロー関数」で検索して辿り着く人が多いようなので、 前書いた記事の要点だけまとめます!
アロー関数は従来型の表記に比べ色々省略できます。
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.
PREV
2019-04-25
【JS】CSS変数の全ての値を取得しJSオブジェクトに変換-2
NEXT
2019-04-30
【JS】reduceの使い方と破壊力-3.everyもsomeもfindも、もう全部reduceでいいの。
LINK
リンク
Twitter
GitHub
TAGS
タグ
LATESTS
最新の記事
POPULAR
人気の記事
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介