Treehouse

The Truth About Semicolons in JavaScript

By on  

There's been a lot of debate over semicolons in JavaScript.  Semicolons aren't required due to the nature of JavaScript's automatic semicolon insertion, but they've been been considered a best practice for years.  The following illustration sums up my thoughts on semicolon usage within JavaScript:

JavaScript Semicolons

Ultimately it's a team / organizational decision but consistency is key. Where do you sit on the JavaScript debate?

Image created by @rfunduk

ydkjs-2.png

Recent Features

Incredible Demos

  • MooTools Zoomer Plugin

    I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is...

  • Control Element Outline Position with outline-offset

    I was recently working on a project which featured tables that were keyboard navigable so obviously using cell outlining via traditional tabIndex=0 and element outlines was a big part of allowing the user navigate quickly and intelligently. Unfortunately I ran into a Firefox 3.6 bug...

Discussion

  1. Dan

    Just as long as one doesn’t accidentally forget that semicolons don’t actually do anything.

    I did this once:

    function() { return
    1; }

    It didn’t end well. I was wondering why my function kept returning undefined. I ended up wrapping it like that because the function was passed as a parameter to another function call and it wrapped nicely that way. I fixed it by… not wrapping it like that.

  2. Thank you!

    Improper usage of semicolons reminds me of txt spk. Just because it’s possible to read doesn’t make it right.

  3. Erik Lundmark

    It’s the price we pay for simplicity, which has proven to be complicated… You don’t see articles about these kind of quirks in the Python community f.i., but how much bigger is JS compared to Python? That said, inserting a semi-colon vs finding the error when U don’t? Worth it every time, if u know Why u’re using it. (Teams and large projects: another issue)
    Btw, thx for the Office Space remider, next on movie night :)

  4. Arpad Borsos

    Writing a semicolon is burned into my muscle memory pretty hard.
    I keep writing them in for (); loops which is kind of bad.
    Or I keep writing them in languages without them (python)

    Well that’s one downside of using a keyboard layout optimized for programming (neo2) :-)

  5. Stephen

    I have to put in the semicolons. It has been burned in to me since I started out with PHP, and in PHP if you forget a semicolon, nothing works.

  6. Lee Wilson

    I’d say definitely ALWAYS use them. Just because you can does not make it right. And I usually find it’s the lazy developers who do this!

    One major advantage for always using them is if you want to minify your JavaScript. If you do not use semi colons, and you minify (like a lot of developers like to do if their site serves a lot of JavaScript) you could get all sorts of problems.

    Such as:

    var myVar = 9
    if (myVar == 9) {

    }

    When minified, may become:

    var myVar 9 if (myVar == 9) {}

    And guess what? The script works unminified, but breaks due to a syntax error when minified, but if you drop in the semi colon where it should be, like this:

    var myVar 9; if (myVar == 9) {}

    It works :-)

    Moral of the story, don’t be lazy! And use them!

    • Nick

      Actually, the moral of the story you’ve just told is “don’t write tools that break otherwise working code.”

  7. Just use them. We all saw the debacle that unfolded in 2012 regarding Bootstrap and Crockford. If minimizing whitespace in your code causes it to behave differently, you’re doing something fundamentally wrong (unless your language relies on whitespace, of course).

  8. I’d like to point out that the specification is clear about this. JavaScript’s syntactic grammar specifies that semi-colons are required. Omitting semi-colons results in invalid JavaScript code. That code won’t throw (thanks to ASI), but it’s still invalid. Again, the syntactic grammar is clear about this.

  9. Codename: Steeve Knight

    Self-termination (unrelated to Swartzing [GBHS]) in ECMAScript necessitates using ;’s for best practice – ie mostly you’ll get away w/it but sometimes you won’t and may end up spinning your tired wheels.

    @note …and also ! dangling ones {‘s (which is just yucky looking).

  10. William Malo

    Personally, I find semicolons to be ugly and useless. The javascript language doesn’t need it, it’s only useful in these cases:

    var x,y,z;
    for(i=5;i--;)dostuff(),domorestuff(),dolastthing();

    It’s only used where you need to explicitly specify that the code ends.
    The only place where avoiding ;’s is a problem is when you use anonymous functions that run themselves, but if you have the habit of putting a ; before it, everything works.

    ;(function(){ ... })()

    Disclaimer:
    I have never worked with a team before.

  11. Good remainder for JS developers :) Thanks for the good mood

  12. What exactly is the benefit of NOT using them? Why even bother?

  13. I just put them.
    Usually I validate my code with JSLint and there I get warnings if I don’t add them.

    My opinion is to add them as it reduces the probability of having unexpected errors.

  14. I am in side where people think that semicolon should be there ;)

  15. Salman

    I always use them because I also code in other scripting languages where semicolons are required.

  16. I always use the semicolons, mostly due to the fact I come from C# and PHP background, and to me code looks way more readable with semicolons than without them.

  17. Juliet

    Where’s the blog post?

  18. Colon Semi

    Scores so far:


    [4] ALWAYS use them! I can't explain exactly why...
    [3] I use semi-colons because I'm used to PHP/C/whatever
    [2] I'm used to them/don't care
    [2] Just use the damn semi-colons!

    A pretty good technical discussion.

  19. PUT IN THE FUCKING SEMICOLONS!!!

  20. g23

    “What exactly is the benefit of NOT using them? Why even bother?”

    But, the real question is, what exactly is the benefit of using semi-colons? Why even bother [typing them]?

    There are NO valid technical arguments for or against them, they just don’t do anything.
    Imho, they are mere *decorative* elements, and as swiss/minimal design principles advocate should be removed ;-)

  21. @g23

    that’s not correct, there are valid technical arguments for them – avoiding errors in certain situations, and linters. Whereas by using them, you will never risk getting those errors, and linters will work. A no brainer, IMHO

    For me it’s got to do mostly with muscle memory – I don’t want to stop at the end of each line and double check missing a semi colon will cause no trouble. it’s so much simpler and faster to type them every time.

    If you are really bothered by semicolons so much, just use CoffeeScript.

  22. Cazydi

    @g23 I do use them for my bookmarklets and removing extra 13h 10h characters from my compressed script.

  23. Jason

    Semicolons are optional like in PHP you have the option to use ‘<?' or '<?php' to start a block of code. Most of the time using either will work fine. There are some cases though where going against recommendations will bite you in the ass.

    In JavaScript the semicolon allows the developer to signify the end of a statement. This is very useful when it comes to minimising code. Without using semicolons you rely on JavaScript to figure it out for you. Often it will do a good job but not in 100% of cases. This is why it is always best to use semicolons.

  24. I am pretty obsessive about using them, probably because a bunch of languages that I used before JS made them mandatory.

    Use them and don’t risk errors, don’t use them and risk errors … a no brainer to me

  25. Forgetting semicolons now will frustrate you later when you attempt to be a better programmer and minify production code.

    enough said.

  26. Well coders like me who have been exposed to java,c++ etc before javascript tend to stick to the semi-colons . Also i tried this out in the mongodb shell(which is javascript based) :-

    >var x=1 var y=2
    gives me SyntaxError :- Missing ; before statement

    while

    >var x=1;var y=2 works just fine :D , So its better to include your semi-colons :)

  27. Idjits

    “Suppose I have code that works in every JavaScript implementation that I target (major browsers and some server-side implementations). If I run it through your minification tool and that tools breaks my code, then I’m sad to report that your tool is broken. If this tool edits JavaScript code, it’d better understand it as a real interpreter would.”

    Problem?

  28. JSHint.
    JSHint.
    JSHint.
    Use CodeKit and run check ‘run JSHint’ on every file. Fix the warnings and errors. Done.

  29. Let’s jshint or jslint – or whatever javascript lint do the job.
    Set up a jshintrc and let the tool do it’s job of taking care about code quality and syntax for the whole team :)

  30. Eljay

    I think Mislav clarified the semicolon discussion clearly in his web page http://mislav.uniqpath.com/2010/05/semicolons/

    I put the semicolons in. But I’m beginning to think that’s just because I’m used to C++, and I’m OCD.

    “…there are valid technical arguments for them…” but no valid technical arguments are forthcoming. Handwaving and F.U.D.

    Broken tools is not a valid technical argument. If your minifier does not handle semicolon-less code properly, it is a broken tool. There are many minifiers that are not broken.

    • Jonnybordo

      I’ve been reading about this debate today, and this is the third time I see people referring to this article.
      I just have to say that I think it’s a terrible article.
      It’s obviously biased, and at the end of it all he simply says: “I hate semicolons, it doesn’t help at all, oh except for that one case where you have to use it”.
      People using semicolons don’t need to think if it’s ok they’re using it or not, people who don’t do.
      I guess you can see on what side I am :)

  31. Karl

    If you want to leave them off. Don’t write JS, write CoffeeScript instead.

  32. I always put in semi-colons because I don’t want to think about whether I need one or not.
    I want to think about the feature I am delivering.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!