JavaScriptのセミコロンを省くと起こること

最初に

JavaScriptにはセミコロンを省いても自動で文を解釈して実行してくれるという特性があります。
そのため以下は等価となります。

var a
a = 1
console.log(1) // 1

var b;
b = 1;
console.log(1); // 1

もちろんエラーも起こりません。

そんな特性を持っているためか、ライブラリなどでたまに先頭にセミコロンをつけてから始めているものもちらほら見受けられます。

どんなことが起こるのか知ってますか

そんな特性を持っていて、ライブラリなどにセミコロンをつけないとどんなことが起こるのか、また、セミコロンがないときの文の解釈を簡単にまとめてみました。

試してみました

代入

まずは基本的な代入。そのままa=1として解釈されます。

基本的な代入

a
=
1
console.log('a=' + a) // a=1

//以下上記と等価
a = 1;

計算結果を代入。b=b1+b2として解釈されます。

計算結果を代入

var b1 = 1, b2 = 2
b
=
b1
+
b2
console.log('b=' + b) // b=3

//以下上記と等価
b = b1 + b2

インクリメント

インクリメント演算子で1足してみると驚きの結果。後ろにあるdの方が足されます。引いてみても後ろの変数が引かれます。

インクリメント

c = 1, d = 1
c
++
d

console.log('c=' + c) // c=1
console.log('d=' + d) // d=2

// 以下上記と等価
c;
++d;

関数

関数で計算結果を返すものを混ぜてみます。

乗算の結果を返す

function fun(x1, x2) {
    return x1 * x2
}

関数の引数部分が別れてもしっかり解釈してくれるようです。

計算結果を代入

var e1 = 1, e2 = 2

e
=
e1
+
e2
+
fun
(2,5)

console.log('e=' + e) // e=13

// 以下上記と等価
e = e1 + e2 + fun(2,5)

エラー発生

さてここからが問題です。下記のように下の文に(が続くと、上の文の引数部分として解釈されるようです。

計算結果を代入

f
=
fun(1,2)
(function() {
    console.log('function!')
}());

// Uncaught TypeError: fun(...) is not a function

// 以下上記と等価
f = fun(1,2)(function() {
    console.log('function!')
}());

なので例え値を持った変数が(の上の文だとしても関数だと解釈されエラーが発生します。

var f1 = 1
f
=
f1
(function() {
    console.log('function!')
}());

// Uncaught TypeError: f1(...) is not a function

// 以下上記と等価
var f1 = 1;
f = f1(function() {
    console.log('function!')
}());

ちなみにreturnも行を分けると、その下の文が何であろうと実行されないので注意

returnでも

function ret() {
    return
    1
}

console.log(ret()) // undefined

結果

セミコロンは絶対つけましょう。
影響範囲を探す手間を考えればつけないという選択肢はないです。