Should you use semicolons in Javascript?

Guide
1

Semicolons are not required in Javascript. This is because Javascript has a feature called “Automatic Semicolon Insertion,” or ASI for short. ASI puts semicolons in your Javascript for you. It is active by default and always active, it’s a part of the language and can not be disabled.

ASI has a set of rules it uses to determine where it should insert semicolons. If there is already a semicolon in place, it won’t change anything. See this StackOverflow answer for more information on how ASI works.

There is only one case where ASI fails: when a line starts with an opening bracket ( or [. To avoid this causing errors, when a line starts with an opening bracket, you can put a semicolon at the beginning of the line that has the opening bracket:

;(function() {
  console.log('Hi!')
})

Note that this is only required if you don’t use semicolons.

A consistent coding style makes code more readable. Decide whether you will or won’t use semicolons, and do so everywhere.

Other resources


http://blog.izs.me/post/2353458699/an-open-letter-to-javascript-leaders-regarding

2

Thx, camperbot. Mozilla’s Old school sez use semi-colons … but, if you do … will this create a dupe, or simply an override by the system you’ve described?

3

Taking Camperbot’s popularity in consideration, I’d like take on a daring adventure of pointing out a few gotchas when it comes the topic semicolons are optional in JS and show that how it’s a false assumption. And why explicitly using semicolons is a good practice in general.

Javascript is a language for non complainers. Unlike Java, for example.
No semicolon in JS? No problem!
No semicolon in Java? Government shutdown, reelection!

In case semicolon is not present at the end of an expression, js engine will add them for you.

So semicolons in JS are optional, or are they?

Consider this example

function foo(){
  var id="foo"
  return
    id
}

function bar(){
  var id='bar'
  return id
}

console.log(foo()) //undefined
console.log(bar()) // bar

So why dud you get undefined instead of foo ?

Well that’s the thing with non complaining JS interpreter. It adds a semicolon at the end of an expression.
here the things that succeed return are optional. So the interpreter will assume this as a complete expression and put a semicolon. So the code generated by interpreter will look like this

function foo(){
  var id="foo";
  return;
    id;
}

Notice the added semicolons.

Now this is the case where the similar code structure would work inspite of not having semicolons

function foo(){
  var id="foo"
  return 5 +
    id
}

console.log(foo()) //5foo

Now in this case the lack of semicolons didn’t confuse your interpreter for 5 + is not a complete expression. So the interpreter assumes the presence of 2 operand for + somewhere in the remaining part of the code.

So, in a nutshell. The semicolons are NOT options in JS. The interpreter adds semicolons for you.
So if you choose to skip semicolons while writing code, it is your responsibility to resolve any such confusing expressions beforehand.

4

@rwebaz ASI does not touch change anything if there is already a semicolon in place. I’ve updated the post to clarify this.

@adityaparab I recommend checking out the resources linked in the original post. They both mention the example case you bring up. The important thing to note here is that if you add semicolons yourself, the exact same problem will occur.