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

2023年12月15日2024年1月8日

30代のブロガーとエンジニア。
工場勤務→情シス→ソフトウェアエンジニア
主にフロントエンド開発を行っています。

趣味はガジェットと植物。

アロー関数は複雑です。

Javaなどの言語に慣れている方は、アロー関数の記法の統一性のなさに毎回苦労します、、

ReactやVueなどで他人のソースコードを見る時など、初学者は非常に苦労します。

なので省略記法について記事にまとめました。

普通のアロー関数

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

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

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

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

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

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

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

無しパターン。すごくわかりにくい。

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

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

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'}

下記記事めちゃめちゃ勉強になりました。ありがとうございます。

Zenn

よかったらシェアしてね！