JavaScript アロー関数の罠

2022年7月9日

JavaScript のアロー関数では、引数が一つの場合に括弧を省略することができます。

(a) => {} //省略しない場合
a => {}   //省略した場合

括弧を省略した場合、あるケースでバグになる可能性があります。

以下のコードをみてください。

const a = 1

if (a => 2) {
	console.log('aは2以上です')
}

if の条件の a >= 2 としたかったのですが、間違えて a => 2 としてしまったコードです。

このコードを実行すると 'aは2以上です’ が出力されます。つまり if の条件は true になります。構文エラーにはなりません。

これを防止するために、ESLint には arrow-parens というルールがあり、これを有効にすると引数の部分の括弧が強制されます。