Do I need to add a semicolon to the JS code?-1024programmer

Semicolons in Javascript separate communities. Some people like to use semicolons anyway. Others prefer not to include semicolons.

After years of using semicolons, in the fall of 2017, I decided to try going without semicolons as needed, and set Prettier to automatically remove semicolons from my code unless necessary code structures required them.

Now I find it very natural not to use semicolons, 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 required somewhere, it adds it behind the scenes.

This process is called automatic semicolon insertion.

It is important to understand the rules for using semicolons so that you can avoid writing buggy code because they behave as you expect s difference.

Javascript automatically adds semicolon rules

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

When the beginning of the next line of code interrupts the current line of code (the code can be written in multiple lines)
The next line starts with }, closing the current block
When the end of the source code is reached
When the return statement is on the current line
When the break statement is on the current line
When the throw statement is on the current line
When the continue statement is on the current line

Code example that is different from what you think

In 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 & # 39; forEach & # 39; 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()

Printed as “3”.

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

Raises a TypeError: b is not a function exception instead, 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: & # 39; white & # 39;
   }
 })()

You expect the return value of this immediately invoked function to be an object containing a color property, but it doesn’t. Instead, it’s undefined because Javascript inserts a semicolon after return.

Instead, you should put the opening bracket after return:

(() => {
   return {
     color: & # 39; white & # 39;
   }
 })()

You think this code will show '0':

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

Instead it will display 2, because Javascript interprets rule 1 as:

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

Conclusion

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

I’m not suggesting anything, just letting you decide.

Just one thing to note, even though most of the time these basic scenarios never appear in your code.

A few excerpts of the rules are as follows:

Be careful using the return statement. If you return something, add it on the same line as the return content (like break, throw, continue)
Never start a line with parentheses, These may be concatenated with the previous line to form a function call or an array element reference

Finally, always test your code to make sure it does what you need.