JavaScriptの自動セミコロン挿入は直感通りに行われないことがある

JavaScriptは行末をセミコロンで終える必要がありますが、自動セミコロン挿入によってセミコロンの表記を省略できます。

MDN - 字句文法 によると、そこにセミコロンがないと文法上エラーになってしまうときに一定のルールに基づき挿入されます。

たとえば、以下のようなコードの場合を考えます（サンプルコードなので、このコードの結果に意味はありません）。

const foo = [3]
const bar = foo[0]
[6].reduce((acc, val) => acc * val)

ブラウザ上で実行すると以下のようなエラーメッセージが表示されます。

VM899:3 Uncaught TypeError: Cannot read properties of undefined (reading 'reduce')
    at <anonymous>:3:5

これは、自動セミコロンが以下のように挿入されたことにより、foo[0][6].reduce(...); と評価されたことで reduce を参照できずにエラーになってしまいます。

const foo = [3];
const bar = foo[0]
[6].reduce((acc, val) => acc * val);

文法的には foo[0][6] は成立しているので、自動セミコロンが挿入されないということですね。

以下のようにセミコロンを明示的に書くと、プログラムを実行できることを確認できます。

const foo = [3];
const bar = foo[0];
[6].reduce((acc, val) => acc * val);

何も知らずにセミコロンを省略したコーディングをしているとかなりハマりそうだなという感想でした。個人的にはセミコロンを省略しない書き方のほうがよいのかなという気持ちになっています。

ではでは～。