JavaScriptで明示的なセミコロンが重要である理由

私はダグラス・クロックフォードによる@PayPalEngでの「EffectiveJavaScript」トレーニングに参加しており、それがどのような啓発的な経験であったかを表現することはできません。JSで明示的なセミコロンを使用することが非常に重要である理由を今日理解しました。すぐに私の洞察を共有します。#javascript #webdevelopment #PayPal

—シュルティ・カプール(@ shrutikapoor08)2018年11月28日

自動セミコロン挿入がバグにつながる可能性がある落とし穴

数か月前に、ダグラス・クロックフォードによる効果的なJavaScriptトレーニングを受講しました。それ以来私が悩んでいたことの1つは、JavaScriptで明示的なセミコロンを使用することの重要性です。しばらくの間、私は怠惰に書くこと;を避け、パーサーが私の仕事を正しく行うと思い込んでいました。この投稿では、私の考え方を変えたいくつかの例を紹介したいと思います。

例1

これの出力はどうなると思いますか?

const test = () => { return { ok : true } } console.log(test())

これの出力はobject、プロパティがにok設定されたであると予想されtrueます。しかし、代わりに、出力はundefinedです。これは、中括弧が改行で始まるため、セミコロンの自動補完によって上記のコードが次のように変更されるためです。

const test = () => { return; { ok : true } }

修正:リターンの右側に中括弧と明示的なセミコロンを使用します。

const test = () => { return { ok : true } };

例2

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

上記のコードで何が起こると思いますか?エラーが発生するUncaught ReferenceError: b is not defined. これは、3行目の括弧が関数の引数として解釈されるためです。このコードは次のように変換されます。

const a = 1; const b = 2(a+b).toString();
代入ステートメントが左括弧で始まらなければならない状況では、プログラマーは、自動セミコロン挿入に依存するのではなく、前のステートメントの最後に明示的なセミコロンを提供することをお勧めします。

— ECMA-International.org

自動セミコロン挿入を使用するときは注意することを学びました。

参考文献 -

  1. 自動セミコロン挿入ルール
  2. 同じ講義に触発されたBradleyBraithwaiteによるブログ投稿

何か新しいことを学びましたか?コメントがありますか?DevJokeを知っていますか?ツイートしてください@ shrutikapoor08

「私はいつも女性に言います。あなたが一番上に着いたら、エレベーターに戻って女性を連れてきてください」-ユーニス・ケネディ・シュライバー。知恵の言葉。#fempire #womenintech #womenleaders

—シュルティ・カプール(@ shrutikapoor08)2019年1月17日