JavaScriptのセミコロン

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

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

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

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

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

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

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

JavaScriptの自動セミコロン挿入のルール

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

  1. 次の行が現在の行を壊すコードで始まる場合(コードは複数行で生成される可能性があります)
  2. 次の行がで始まるとき}、現在のブロックを閉じる
  3. ソースコードファイルの終わりに達したとき
  4. あるときreturn独自の行のステートメント
  5. あるときbreak独自の行のステートメント
  6. あるときthrow独自の行のステートメント
  7. あるときcontinue独自の行のステートメント

あなたが思っていることをしないコードの例

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

これを取る:

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)

結論

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

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

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

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

  • 注意してくださいreturnステートメント。返品する場合は、返品と同じ行に追加してください(breakthrowcontinue
  • 括弧で行を開始しないでください。括弧は前の行と連結されて、関数呼び出しまたは配列要素参照を形成する場合があります。

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

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: