かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

JavaScript (ES2015) アロー関数 省略した書き方とかのメモ

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とかフォーマッターを導入するか、書き方のルールを決めておかないと、省略形が入り乱れると結構混乱しそうって思いました。


これから学ぶ JavaScript

これから学ぶ JavaScript