/ #javascript #es2015 

君はarrow functionの波括弧省略について知っているか

引き続き勉強兼ねてchrome拡張書いてるんですが、 そのときに読んで知った初心者メモ。

引数の丸括弧()の省略については知っていたんですが、波括弧{}も省略できる時があるんですね。

1行だけ・かつ返り値として扱うときにこう書ける。

// #1
twice = n => n * 2;
twice(3); // 6

#1は波括弧を省略しているためそのステートメントの結果が返り値になります。

つまり↑の#1は以下#2と等価ではありません。

// #2
twice = n => { n * 2; }
twice(3); // undefined

#1は以下#3と等価です。

// #3
twice = n => { return n * 2; }
twice(3); // 6

さて

オブジェクトリテラルも波括弧({)を使うので、

arrow(=>)の次にオブジェクトリテラルが来ると混乱しそうですが、

// object リテラル式を返す場合は、本体を丸括弧 () で囲みます:
params => ({foo: bar})

アロー関数 - JavaScript _ MDN

とのことです。


手元のchrome(chrome55)で確認すると、こんな感じでした。

bar = 1
func1 = params => ({foo: bar})
func2 = params => {foo: bar}

console.log(func1()); // Object {foo: 1}

console.log(func2()) // undefined

なるほど…

Author

hoshinotsuyoshi

星野剛志(ほしのつよし) web application engineer. ruby/rails/docker