JavaScriptのアロー関数の省略記法について

JavaScriptのアロー関数の省略記法についてよく分からないことがあったのでテストした結果です。

昔ちょっとJavaScriptをかじっただけで久しぶりに勉強しようと思ったら、アロー関数というものが登場していて面食らいました。
関数というとついつい「function()」というワードを探してしまう人にとっては「function()」を使わないアロー関数は気持ち悪いのなんの……。ぶつぶつ。

で、気持ち悪いアロー関数にはさらに省略記法というか省略形があるので、初見で「ひぃっ」とうめき声が出る始末です。

まずは普通にアロー関数を定義してみる。

const test = ( msg )=> {
	alert( msg );
}

test( '普通のアロー関数です' );

まず1つ目の省略記法。

アロー関数は引数が1つだけの時はカッコを省略できる

こんな感じです。

const test = msg => {
	alert( msg );
}

test( '引数が1つだけの時はカッコを省略できます' );

めちゃくちゃ気持ち悪いですね。
「function()」がないので「()=> {}」の形を探そうにもカッコがないので、アロー関数が気が付きにくいです。
なので頼りになるのは「=>」という表記だけ！

とにかく「=>」があったらアロー関数だと思うことにします。
因みにカッコが省略できるのは引数が1つだけの時だけです。
引数がない場合と引数が2つ以上の場合でカッコがないとエラーになります。

次です。

処理を一行で返却する場合は波カッコとreturnを省略できる

はっ？　何いってんだこいつ！　と思いますよね。
関数内の「return文」がないとますます関数だって分かり辛くなります。

なので以下のような書き方は

const test = msg => { return( alert( msg ) ); }

test( 'わざと一行で書いてみる' );

以下のように省略できます。

const test = msg => ( alert( msg ) );

test( 'このように波カッコとreturn文を省略できる' );

省略できることを知らないと「alert( msg )」の外カッコがなんなのかさっぱり意味不明ですね。
このカッコは「グループ化演算子」と呼ばれるものらしいです。

次です。

返却値が複数行になる場合は()で囲むことで単一行のようにまとめて返却できる

もっと気持ち悪いのが、複数行を()で囲んで単一行として扱う方法です。

以下のような書き方は

const test = ( msg1 , msg2 ) => {
	return { msg1: msg1 , msg2: msg2 };
}

console.log( test( '値1' , '値2' ) );
//{msg1: '値1', msg2: '値2'}

以下のように省略できます。

const test = ( msg1 , msg2 ) => (
	{
		msg1: msg1 ,
		msg2: msg2 ,
	}
)

console.log( test( '値1' , '値2' ) );
//{msg1: '値1', msg2: '値2'}

これは省略というより、冗長化とも言えるかもしれません。
return文は複数行＝カンマで改行して返却できないので、一度変数に代入するか、長くなっても我慢して一行にするしかありません。

しかし、それだとコードの視認性が悪くなるのでカッコで複数行をグループ化して返却できるようにしたのだと思われます。
とりあえず、「return文」は「カッコで省略できる」と覚えておくといいですね。

VueやReactではよく出てくるので混乱する記法ですね。