Do I need to add semicolons to JS code?

Semicolons in JavaScript delineate communities. Some people prefer to use semicolons anyway. Others prefer not to add a semicolon.

After many years of using semicolons, in the fall of 2017 I decided to try not adding semicolons as needed, and set up Prettier to automatically remove semicolons from my code unless necessary code structure required them.

Now I find that not using semicolons is very natural, I think such codes look better, they are more concise and readable.

This is entirely possible because JavaScript does not strictly require semicolons. When a semicolon is needed somewhere, it adds it behind the scenes.

This process is called automatic semicolon insertion.

It is important to understand the rules for using semicolons to avoid writing buggy code that behaves differently than you expect .

JavaScript rules for automatically adding semicolons

The JavaScript interpreter will automatically add semicolons when it finds the following special circumstances when interpreting source code:

• When the next line of code begins to interrupt the current line of code (the code can be written in multiple lines)

• When the next line begins with }, close the current block

• When the end of the source code is reached

• When return is declared on the current line

• When break is declared on the current line

• When throw is declared on the current line

• When continue is declared on the current line

With your Code Examples

Think differently about these rules, here are some examples.

Look at the example:

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

You will get the error Uncaught TypeError: Cannot read property 'forEach' of undefined because based on rule 1, JavaScript will try to interpret the code as

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

This code:

(1 + 2).toString()

prints as "3".

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

Instead, a TypeError: b is not a function exception is raised because JavaScript tries to interpret it as

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

Another example based on Rule 4:

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

You expect the return value of this immediately called function to be an object containing a color property, but this is not the case. Instead, it's undefined because JavaScript inserts a semicolon after return.

Instead, you should put the left bracket after return:

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

You think this code will display '0':

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

Instead it will display 2, because JavaScript according to Rule 1 will be interpreted as:

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

Ending Statement

Be careful. Some people have a problem with semicolons. I don't really care, this tool gives us an option to not use it, so we can avoid using semicolons.

I'm not suggesting anything, I'm just letting you make your own decision.

We just need to note that even though most of the time these basic scenarios never appear in your code.

Excerpt some rules, as follows:

• Use return statements carefully. If you return something, add it to the same line as the returned content (similar to break, throw, continue)

• Never start a line with parentheses, these may Concatenated with the previous line to form a function call or array element reference

Finally, always test your code to make sure it meets your needs.

Recommended tutorial: "JS Tutorial"

The above is the detailed content of Do I need to add semicolons to JS code?. For more information, please follow other related articles on the PHP Chinese website!