javascriptでリテラルなArrayの前はセミコロンが必要です。

表題の通りなのですが、なぜ今まで一度も引っ掛からなかったんだろう？という奇妙だけどありそうなエラーに引っかかったので共有します。まあ、セミコロン省略しないで必ず書く人は引っかからないでしょう。

一部抜粋ですがこのコードはUncaught TypeError: Cannot read property 'forEach' of undefinedのエラーになります。

form.target = 'ServiceItemForm'

[
  { name: 'shop_id', value: this.props.currentShop.id },
  { name: 'category', value: category },
  { name: 'sub_category', value: sub_category },
  { name: 'name', value: name }
].forEach(item => { //ここでエラー！
  ....
})

どう見てもちゃんとしたArrayだしなんでだ？と思ったのですが、詳しく読み解いてみると・・・

//セミコロンがないので'ServiceItemForm'のプロパティーにアクセスしようとしてる
form.target = 'ServiceItemForm'[...].forEach

//[]の中は複数のオブジェクトをカンマで列挙してるので一番最後のオブジェクトが評価される
form.target = 'ServiceItemForm'[{ name: 'name', value: name }].forEach

//{ name: 'name', value: name }が文字列に変換される
form.target = 'ServiceItemForm'['[object Object]'].forEach

//'ServiceItemForm'['[object Object]']はundefined

今まで鬼のようにJS書いたけどこれは初だったかも。でも割とセミコロン書かない方なので不思議だなあ。
https://stackoverflow.com/questions/38908243/cannot-read-property-foreach-of-undefined
またスタックオーバーフローに助けてもらいました。