javascriptで`;`を省略すると期待通りに動かないパターン

最近、;を省略して書くのがマイブームになっていて、問題に遭遇したので共有しておきます。有名な話だと思いますが、実際遭遇したのは初めてで、しばらくエラーの意味がさっぱりわかりませんでした。

//error.js
const foo = 'bar'

(function(){
  //無名関数
})()

上記のerror.jsを読み込むと、fooに'bar'を代入後、無名関数が即時実行されるのを期待していましたがそうはなりません。

'bar'を関数とみなして、無名関数を引数に即時実行しようとしUncaught TypeError: "bar" is not a functionというエラーが発生します。

const foo = 'bar'(function(){})()

と書くと割と納得できます。

このパターンだとエラー表示が直接的ですぐ気付くと思いますが、(の前が関数だと呼び出しに成功してしまい、もう少し奥の方でエラーが発生するので少し難解になります。

const foo = function(bar){
  //なにかする
}

(function(){
  //なにかする
})()

下記のように書くと回避できます。

const foo = function(bar){
  //なにかする
}

;(function(){
  //なにかする
})()

(で始めるときは必ず頭に;をつけましょう。