JavaScript semicolon-less code style and minification? [closed]

Question

I am trying to decide if it worth to go with JavaScript semicolon-less style.

If I have JavaScript code without semicolon:

function(){
    var first = 1
    var second = 2
    sum = 1 + 2
    return sum
}

it will work in browser and Node.js.

But will minified (by Uglify or Closure Compiler) code work in browser and Node.js?

I've read the article Semicolons in JavaScript are optional. it says that it should work.

Answer 1

I'm personally a pro-semicolon sort of guy, but there is a compelling argument for the alternative, which is frequently not given a fair voice. As with all coding style arguments this will be a never-ending debate with no reasonable conclusion. Do what you and your team feel more comfortable with.

If you do go for a frugal semicolon approach, make sure you and your team properly understand the automatic semicolon insertion (ASI) and statement termination rules. That is definitely a good thing to understand whatever your decision.

With respect to minification: If you don't want to risk the potential headache of a minifier bug and the associated burden of reporting it and fixing it (or waiting for a fix) because it's not doing ASI properly, then don't rely on ASI.

• Isaacs (Node.js maintainer, and therefore minification agnostic for the purposes of this question) on the subject
• He recommends this excellent impartial analysis of the ASI rules

Answer 2

Despite that semicolons in JavaScript are optional, there's strong advice against not using semicolons:

• It makes your code vulnerable for bugs resulting from removing whitespace (used in minification): Try this:

  var a = 1; var b = 7; var sum = a+b (a + b)

it minifies to var a=1,b=7,sum=a+b(a+b);, which will result in the error number is not a function. There are also other cases and this case.

Update: This bug wasn't resulting from minification, however, the next one is:

• It makes your code vulnerable for bugs resulting from minification: Try:

    var isTrue = true
  
    function doSomething() { return 'yeah' }
  
    function doSomethingElse() { return 'yes, dear' }
  
    doSomething()
  
    !isTrue && doSomethingElse()
  

  minifies to:

    var isTrue=true;function doSomething(){return "yeah"}function doSomethingElse(){return "yes, dear"}doSomething()!isTrue&&doSomethingElse();
  

  which results in:

    SyntaxError: Unexpected token !
  

• It makes your code less readable and maintainable in terms of convenience: Using the semicolon has been rightfully established as good practice, and a trained JavaScript developer will be puzzled by code trying to evade the convention.

Another thing is, you have to ask yourself: What do you really gain omitting the semicolon?

• Clean Code? If you want JavaScript to not look like JavaScript, try CoffeeScript. But there are some misguided notions, which believe that pitfalls like the one mentioned above are cleared by «Easy solution: when a line starts with parenthesis, prepend a semicolon to it.». How is this clean code, and how does that help anyone reading your code?

Bottom Line: With minification, I would definitely try to use conventions of JSLint. I've seen some people finally linting their JavaScript code after hours of trying to fix a bug not happening in unminified, but in minified code. Don't put yourself into this misery; semicolons may be ugly at first sight, but they keep the bugs out.

Answer 3

The compilers and minifiers are probably intelligent enough to add the semicolons if needed (and if it helps the minifying process).

However! A semicolon tells the interpreter that this is the end of a statement. If it is missing, it has to look at the beginning of the next line to find out if it makes sense for the statement to continue. Then it will decide, if the next line is a new statement (i.e. a semicolon was missing) or if it's in fact the continuation of the statement from the previous line.

Without semicolons, you're slowing things down! Not to mention that this could introduce some obscure errors when the interpreter, executing the algorithm I described, decides wrong!