JavaScriptのセミコロン

JavaScriptセミコロンはオプションです。個人的には、コードでセミコロンを使用しないようにするのが好きですが、多くの人がセミコロンを好みます。

JavaScriptのセミコロンは、コミュニティを分割します。何があっても、常にそれらを使用することを好む人もいます。他の人はそれらを避けたいです。

セミコロンを何年も使用した後、2017年の秋に、必要に応じてセミコロンを回避することにしました。セミコロンを必要とする特定のコード構造がない限り、コードからセミコロンを自動的に削除するようにPrettierを設定しました。

今ではセミコロンを避けるのが自然だと思います。コードは見栄えが良く、読みやすくなっていると思います。

JavaScriptは厳密にセミコロンを必要としないため、これはすべて可能です。セミコロンが必要な場所がある場合は、舞台裏で追加します。

これを行うプロセスはと呼ばれます自動セミコロン挿入。

期待どおりに動作しないためにバグを生成するコードを記述しないように、セミコロンを強化するルールを知っておくことが重要です。

JavaScriptパーサーは、ソースコードの解析中に次の特定の状況を検出すると、セミコロンを自動的に追加します。

これらのルールに基づいて、いくつかの例を示します。

これを取る：

const hey = 'hey'
const you = 'hey'
const heyYou = hey + ' ' + you
[‘h’, ‘e’, ‘y’].forEach((letter) => console.log(letter))

エラーが発生しますUncaught TypeError: Cannot read property 'forEach' of undefinedルールに基づいているので1JavaScriptはコードを次のように解釈しようとします

const hey = 'hey';
const you = 'hey';
const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter))

そのようなコード：

(1 + 2).toString()

プリント"3"。

const a = 1
const b = 2
const c = a + b
(a + b).toString()

代わりにTypeError: b is not a function例外、JavaScriptはそれを次のように解釈しようとするため

const a = 1
const b = 2
const c = a + b(a + b).toString()

ルール4に基づく別の例：

(() => {
  return
  {
    color: 'white'
  }
})()

この即時呼び出し関数の戻り値は、を含むオブジェクトであることが期待されます。colorプロパティですが、そうではありません。代わりに、それはundefined、JavaScriptは後にセミコロンを挿入するためreturn。

代わりに、オープニングブラケットを直後に配置する必要がありますreturn：

(() => {
  return {
    color: 'white'
  }
})()

このコードはアラートに「0」を示していると思います。

1 + 1
-1 + 1 === 0 ? alert(0) : alert(2)

ただし、ルール1のJavaScriptは次のように解釈するため、代わりに2が表示されます。

1 + 1 -1 + 1 === 0 ? alert(0) : alert(2)

注意してください。一部の人々はセミコロンについて非常に意見があります。正直言って気にしません。ツールには使用しないオプションが用意されているので、セミコロンを避けることができます。

私はあなた自身の決定を選ぶこと以外は何も提案していません。

ほとんどの場合、これらの基本的なシナリオがコードに表示されない場合でも、少し注意を払う必要があります。

いくつかのルールを選択してください：

そして最終的には、常にコードをテストして、コードが希望どおりに機能することを確認してください