たるにっき

Technology Acquisition Log 日記.

JSのセミコロン省略について

最近身近で「JSのセミコロンって要るの?意味あるの?」という質問があり、 漠然と「無くてもいいっぽいよ」という認識しかなかったため調べてみました。

ちなみに自分は最近は書かないことが多いです。

2015年なので少し古いですが、この記事が良かったです。
JavaScriptの行末セミコロンは省略すべきか | blog.tai2.net

大体以下のような内容でした。

  • 本来は文の終わりを示すのにセミコロンは必要
  • JSにはAuto Semicolon Insertionという実行時に必要であればセミコロンが適宜自動で挿入される機能がある
  • このため基本的に文の終わりが行末と一致する場合は省略可能
  • ただしASIが意図せぬ挙動の原因となる事がある
    • return{ の間に改行がある場合、return直後にセミコロンが挿入されundefinedが返る
    • (function(){...})() のような記述は、その前の行の行末が変数の場合(a = b + cなど)セミコロンが挿入されず行末の変数を関数として呼び出す(c(...))と解釈される
  • このような罠のためASIを動作させるような書き方(セミコロン省略)は良くないとする派閥がある
    • ASIの作者自身、積極的にセミコロンを省略するのは安全ではないと言っている
  • 一方でnpmやbootstrapの開発者などセミコロン省略派も少なくない
  • ASIが悪さをするような改行の仕方はそもそも良くない書き方なので避ければいい
    • return後改行の問題はセミコロンを付けても回避不可能なのでしてはいけない
    • 関数呼び出しにされるのは!(function(){...})と書けば回避可能
      • これについては批判もある
  • Javascriptは多様な書き方を許容する言語であり、どちらの流派も一理ある

セミコロン省略したいな派としては、ASIについて知らなかったのは不味かったなと思いました。
以下は感想です。

  • 初学者にとっては重箱の隅なので取り敢えずセミコロンは付けさせて慣れてきたら自己責任がいいのかな
  • return 直後に改行するな
    • そもそも返り値はreturnより上で定義した方が綺麗じゃないですか?
  • 即時関数の解釈違いを!で回避する方法については正直ちょっと苦しいと思った
  • 綺麗な書き方をすれば綺麗に動くんですよしらんけど
  • ESLINT使っとけばまず問題起きないでしょしらんけど