O'Reilly

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

Track.js Error Reporting

Recent Features

  • Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

Incredible Demos

  • MooTools Window Object Dumping

    Ever want to see all of the information stored within the window property of your browser? Here's your chance. The XHTML We need a wrapper DIV that we'll consider a console. The CSS I like making this look like a command-line console. The MooTools JavaScript Depending on what you have loaded...

  • Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

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).

    • Benjamin

      I’d say that if you write working code that a minimizer breaks, the minimizer is the component doing something fundamentally wrong ;)

  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.

  33. Shneinerharven

    Better explicit than implicit right?

  34. Dawwg

    Like said before; the specs require it and not following them might break your code when refactoring, minimizing, so use them, otherwise you’re simply underperforming. If you have a car that has automatic emergency breaking and collission prevention, does that mean it’s smart or safe to simply not use the break at all anymore ???

  35. Niraj

    I would suggest to put semicolons, as it helps when you minify your js.

  36. Noopole

    You should put 2 semicolons at the end of each line… to be sure;;

  37. Semi-colons are a security blanket for thumb suckers.

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

Recently on David Walsh Blog

  • OSCON Portland:  Conference  Discount!

    O'Reilly puts on the best web industry conferences in the world.  These conferences include Fluent Conference, Velocity Conference, and the upcoming OSCON in Portland, Oregon from July 20-24.  Open Source Convention (OSCON) is a conference that focuses specifically on open source developers and the tools and possibilities...

  • Follow Redirects with cURL

    I love playing around with cURL. There's something about loading websites via command line that makes me feel like some type of smug hacker, just like tweeting from command line does. I recently cURL'd the Google homepage and saw the following: I found it weird that Google...

  • Developers Have WordPress, Amateurs Have Squarespace, Professional Designers Have the NEW Webydo!

    Web design platforms have traditionally come in one of two varieties. There are the solutions like WordPress and Drupal that are incredibly powerful, but an understanding of web development and coding is required to be able to use those platforms effectively. On the other side of the...

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...