Javascriptのセミコロン自動挿入について.

JavaScriptには, 行末のセミコロンを自動挿入する機能(ASI)が組み込まれているらしくて, JSにわかなので文末にセミコロンがないサンプルコード等を見て割と困惑してました.

なのでその辺の仕様とか文化を軽く調べておこうかなと.

content

セミコロン省略の仕様

端的に言えばセミコロンの代わりに改行があれば大抵の場合は自動挿入されてうまくいく.

上手くいかない場合は, 次の行の開始文字が(や, [であるとき.

var a = 10  // OK
var b = 20

var a = 10  // NG
(() => {
  console.log('hello world');
})();

ただ, 対策として関数や, 配列の前には;をつけて書いてあげれば自身が制御する範囲なら不都合が一切なく用いることができるみたいですね.

var a = 10  //  OK
;(() => {
  console.log('hello world');
})();

セミコロン省略は積極的に利用すべきか

そもそもこの機能は, つけ忘れたセミコロン対策についてるだけの機能らしいです.

とはいえ前述のように工夫をすればある程度実用的に用いることもできるので, 積極的に利用すべき派と利用すべきでない派がいるらしいですが, 個人的には, 自身が制御している範囲外を完全に対策しきることは不可能ですし, 外部モジュールのインポートや, ソースコードを他のツール等に通す場合に不都合が出る可能性を除去しきれないので, 積極的に利用すべきではないと思います.

ただし, ASIの挙動を理解することと, やや難解なこの手法を積極的に利用する派閥もあるので, 彼らのコード手法に則ってコーディングすることで, ある程度慣れておくのも良いかなとは思います.

というか冗長な記述は個人的にも好ましくないので, node.jsすら使わない小さいアプリ程度なら使うのも良いかなという印象ですね.

参考: JavaScriptの行末セミコロンは省略すべきか

文法的に正しいセミコロンの設置場所

上記の例のように,

  • セミコロンを省略しても大抵きちんと動いてしまう
  • 逆に, 無駄にセミコロンを設置しまくってもちゃんと動く

てな感じで, 誤ったセミコロンの位置に気づける機会が少なくなってしまうので, 一応調べておきます.

どうやら, 文法上末尾にセミコロンが必要ないのはIF文等の ブロック制御文 のみらしいです.

まあC言語と同じなんで簡単スネ.

function calc() {
  var x = 10;
  var y = 20;
  console.log(x, y);
}

if (true) {
  console.log('true');
}

気をつけるべき点としては,

  • オブジェクトは, 同じ中括弧でくくる処理ではあるが, 当然ブロックではない
  • ブロック自体を変数に代入している場合は, 代入文の中にブロック分が内包されているだけ(=セミコロンが必要)

なので注意するくらいでしょうか.

{
  text: 'textContent',
  id: '00'
};

var calc_func = function () {
  var x = 10;
  var y = 20;
  console.log(x, y);
};

以上です.

ありがとうございました.