🔖

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

2022/08/26に公開約1,600字4件のコメント

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ではよく出てくるので混乱する記法ですね。

Discussion

アロー関数式は私のようにfunctionreturnを書くのが面倒な人のためにあるのだと思っています。

記事を拝見して気になったのですが、アロー関数式の右辺に()は必要ないかと思います。

const test = msg => alert( msg );

これでOKです。

右辺は式になっているのですが、右辺をオブジェクトにしたいときに、オブジェクトの{}とブロックの{}の区別がつかないため、()を使ってオブジェクトであることを明示できます。

const test = x => { x }; // オブジェクトの{}にしたいのにブロックの{}と解釈されてしまう
const test = x => ({ x }); // ()で囲ってオブジェクトであることを明示する

あるいは、複数行のときは()を使ったほうが良いとされていますね。私は必要ない限り省略していますが、人ぞれぞれじゃないかと。React公式のJSXの説明にも次のように書かれています。

読みやすさのため JSX を複数行に分けています。必須ではありませんが、複数行に分割する場合には、自動セミコロン挿入の落とし穴にはまらないように括弧で囲むことをおすすめします

記事を拝見して気になったのですが、アロー関数式の右辺に()は必要ないかと思います。

もちろんその通りですが、この記事はアロー関数についてよくわからない人のためにあります。
そしてグループ化演算子の説明の伏線となっています。
JavaScriptはカッコだらけになりがちであり、かつ省略し過ぎでもあります。

なので敢えて前段を受けて省略しない形で書いています。
自分の学習メモ用ですので詳しい解説についてはご自身の記事でまとめて頂ければと存じます。

これは大変失礼いたしました。
誤った知識になっていないか心配になったものでして。。
今後も学習が進むことを祈っております。

正解だけを書くのが学習ではありません。
間違う自由というのもあるでしょうし、学習の過程において理解は変質するものです。
むしろこれが正解だとされるものの元ネタが分からずにモヤモヤすることが多々あり、それらを自分なりにまとめることを目的としています。
理解の解像度が変われば過去記事を編集することもあります。

ログインするとコメントできます