ES2015/ES6で追加されたアロー関数()=>{...}
はthis
を拘束できるのがメインだと思っているのですが、色々と省略した書き方ができるようで、まだ不慣れなのでライブラリとか参考のコード見てる時に何だっけ?となりがちだったので省略した書き方のメモ。
アロー関数の基本形
(param1, param2) => { // ... 処理 }
関数名を付けて定義
const func = (param) => { // ... 処理 }
引数が1つのとき()
を省略できる
(param) => { ... }
↓ 省略形
param => { ... }
値を返すだけの関数のときreturn
・{}
を省略できる
(param) => { return val }
↓ return
を省略
(param) => { val }
↓ {}
も省略
(param) => val
※ {}
だけ省略はエラーになる
(param) => return val // SyntaxError: Unexpected token return
オブジェクトを返す時は()
で囲う
返すオブジェクトを()
で囲わないと、オブジェクトの{}
が関数のブロックと解釈される
ex: {cute: '星宮いちご'}
というオブジェクトを返す関数
const foo = (param) => {cute: '星宮いちご'} foo() // undefined
()
で囲ってないとエラーにはならないがundefined
が返る
返すオブジェクトを()
で囲む ↓
const foo = (param) => ({cute: '星宮いちご'}) foo() // {cute: '星宮いちご'}
↓ 下記と同様
const foo = (param) => { return {cute: '星宮いちご'} }
正直{ return {...} }
で良くない?って感じる…
const foo = (param) => { return {cute: '星宮いちご'} }
慣れの問題かもだけど、引数の()
を省略は見づらい... 値を返すだけの関数を1行で書いて{}
とreturn
省略するのは、返す値がオブジェクトや複雑な計算式だとやっぱ見通しが悪い気がしてます。
チームでの開発ならprettierとかフォーマッターを導入するか、書き方のルールを決めておかないと、省略形が入り乱れると結構混乱しそうって思いました。
- 作者: WINGSプロジェクト齋藤新三,山田祥寛
- 出版社/メーカー: インプレス
- 発売日: 2018/07/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る