ES2018の糖衣構文に迷う

Nuxt.jsビギナーズガイドを読んでいるところですが、しっくりこなかったJSの糖衣構文に関してメモ。糖衣構文は波括弧だったり、丸括弧だったり、角括弧だったりで混乱しますね。

アロー関数の糖衣構文

functionではなく=>で関数を記載することが可能。

export const state = () => ({
  counter: 0
});

式のため、厳密にはセミコロンが必要
引数がひとつのときは丸括弧を省略できる
処理が１つの場合、returnと波括弧が省略できる
- http://js-next.hatenablog.com/entry/2014/07/23/173147
returnを省略してリテラルを複数行書く場合は、丸括弧が必要
- https://teratail.com/questions/133559
exportをつけると、別ファイルからimportすることができる
- https://qiita.com/senou/items/a2f7a0f717d8aadabbf7

関数の実引数に波括弧が利用される

increment ({ commit }) {
  commit('increment')
}

本来であれば、contextを変数にもち、以下のように記載する必要がある。

increment (context) {
  context.commit('increment')
}

それを、分割代入した形となる。

({ commit })→({ commit } = context) →( commit = context.commit )

本来のコードを省略して書くことができるため、 Vuexでは多用されている。

import { mapGetters, mapActions } from 'vuex'
import Cookies from 'universal-cookie'

...obj、のように...をつけることで、配列でもオブジェクトでも要素を展開してくれる。

obj = {
  id: 1,
  user: 'name',
  data: 'test' 
}
obj = { ...obj, data: 123 }

つらたん。