Semicolons in JavaScript: To Use or Not to Use?

During one of our first JavaScript lectures at the Flatiron School, the instructor mentioned that semicolons are optional in JavaScript… except when they’re not 🤔

I decided to look more into semicolon usage in JavaScript to truly understand why we would or would not want to use them, and use this knowledge to avoid creating any bad habits early on.

Peter Arkle, https://opinionator.blogs.nytimes.com/2012/07/02/semicolons-a-love-story/

Automatic Semicolon Insertion (ASI)

The reason semicolons are sometimes optional in JavaScript is because of automatic semicolon insertion, or ASI. ASI doesn’t mean that actual semicolons are inserted into your code, it’s more of a set of rules used by JavaScript that will determine whether or not a semicolon will be interpreted in certain spots. I found a helpful lecture from Fullstack Academy on the topic, which you can check out here. I also found a blog post from Bradley Braithwaite on the topic. Below I highlight the main takeaways from these resources.

3 Automatic Semicolon Insertion Rules:

Here are 3 main points to be aware of when it comes to ASI.

1- A semicolon will be inserted when it comes across a line terminator or a '}' that is not grammatically correct. So, if parsing a new line of code right after the previous line of code still results in valid JavaScript, ASI will not be triggered.

Example 1:

var beef 
var cheese 

will become:

var beef; 
var cheese; 

Example 2:

var a 
    b= 
    3;

here, grammar doesn't expect to see b after a, so ASI is triggered

var a; 
b = 3;

Example 3:

a = b + c 
(d + e).print() 

equals:

a = b + c(d + e).print();

2- If the program gets to the end of the input and there were no errors, but it's not a complete program, a semicolon will be added to the end. Which basically means a semicolon will be added at the end of the file if it's missing one.

3- There are certain places in the grammar where, if a line break appears, it terminates the statement unconditionally and it will add a semicolon. One example of this is return statements.

function getCheese() {
    return 
    { 
       cheeseType: "Gouda"
    } 
}

This would trigger ASI and result in:

function getCheese() {
    return; 
    { 
       cheeseType: "Gouda"
    } 
  }

Expressions in a return statement should begin on same line, like this:

function getCheese() {

    return { 

       cheeseType: "Gouda"

    } 

  }

When Should I Not Use Semicolons?

Here are a few cases where you don't need semicolons:

if (...) {...} else {...}
for (...) {...}
while (...) {...}

Note: You do need one after: do{...} while (...);

Final Thoughts

If you're going to write your JavaScript without optional semicolons, it's probably good to at least know what ASI is doing. For example, compression or minification could cause your valid code to throw an error because those programs may rely on semicolons.

Also, it can be harder to debug without semicolons since your code may be concatenating together without you realizing it. If you put a line break where there shouldn't be one, ASI may jump in and assume a semicolon even if there shouldn't be one.

https://www.everywordcounts.co.uk/no-need-to-be-scared-of-semicolons/

Companies and open source projects will likely have a preference one way or another, so be sure to note what it is.

Finally, if you think you may be running into errors due to ASI, check out Babeljs.io to debug - it allows you to put in your code and shows you where ASI semicolons are being inserted.

What have you found to be true when it comes to semicolons in JavaScript?

Comments

[Basti Ortiz]

Personally, I write all of my code with semicolons. Not only because I have grown used to it, but it's also more readable for me because I don't have to think about where statements end. There's just this subconscious part of me that can't interpret code unless there are semicolons. It's analogous to how difficult it is to read a paragraph without proper punctuation, particularly the period.

But then again, that's only my opinion. That's simply how my brain works. We all have different ways of thinking. Using semicolons should not only be a matter of style and consistency but also a matter of lessening the cognitive load of programmers for the sake of productivity and overall happiness.

[adriennemiller]

I agree! Coming from Ruby, I find the semicolons and parenthesis in JavaScript comforting and helpful for readability.

[Daniel Cunha (he/him)]

I totally agree, using semicolons make you code more readable! Maybe, in case of new developers, it is just a matter of get used to it!

[Muhammad Hasnain]

This is a stylistic choice. Someone coming from a Python background won't use it. I've worked on codebases from large companies that DON'T use semi colon and I have no issue with the readability because code readability has nothing to do with semi colons and everything to do with the "good code/bad code" philosophy.

[Brigitta Varga]

I agree with this, I also use semicolons every time. I guess I‘m also used to it, but also because (to me for sure but I think also for others) it‘s more readable.

[Michiel Hendriks]

I think putting significance in things you cannot print is a mistake.

Programs must be written for people to read, and only incidentally for machines to execute. -- Abelson & Sussman

So it's always semicolons for me. Because then I'm clear that this is where I want the statement to end. For the same reason I do not use naked ifs.

[J. A. Whye]

I know this is an older article, but I didn't want someone coming here, reading all the comments and thinking, "Oh, everybody uses semicolons, I guess I'd better..."

Not everybody does. Why type something you don't need to?

I program in C# for my job so am required to use semicolons at the end of the lines. But at home when I'm working on something in Lua, or Javascript, I skip the semicolons. They are generally NOT needed so I don't include them.

If your boss says you have to use them, then use them, but otherwise, why bother?

[David Lopez (Argen.)]

yes... Why bother writing comments if the compiler / interpreter ignores them?

[Rap Mendoza]

Hey man, I understand your point - but doesn't it help if you have something less to think about, such as these rules, and focus on the things that actually matters? I mean you can predict better at what would happen in your code without thinking about such rules.

[Elarcis]

I prefer using semicolons, always:

• It's easier to just put one without wondering if it's needed
• I'm more comfortable with formating tools when they add stuff than when they remove it.

I even push it further, and always use trailing commas when they're at the end of a line (like Prettier does with the "trailingComma": "all" setting), mainly because adding items to arrays and argument lists only highlights the new lines in source control (while not using trailing commas also highlights untouched lines where a comma was added).

[Renato Mignogna]

Interesting that most people like using semicolons. Personally I do not like using them at all, I actually find them a little bit annoying haha!

I can clearly see the end of each line or statement, my linter makes me break long lines into multi lines that area easily readable, so I can't really see the point of adding these little annoying things at the end of each line, it certainly does not make code more readable for me. It's a matter of opinin I guess, and also what each individual is more used to.

dev-to-uploads.s3.amazonaws.com/up...

[Frederic CHAPLIN]

I tried a project without semicolon. 
It's a full-stack project, with typescript/node/express on backend and React/JavaScript on frontend. 

Here are my conclusions on it :

• I encountered no compiling error so far. 
• I had no readability issues. My code felt cleaner and more readable to me without the "semicolon noise".
• But the next developer on the project may find this disturbing

I will use the semicolon again, and stick to the good practices for now. Mainly because I'm afraid of the dreaded compiling bug that may occur and because I care for others.

But I clearly think that JavaScript is much better without semicolons.

[Michael Fasani]

I just wanted to say: google.github.io/styleguide/javasc...

Relying on implicit insertion can cause subtle, hard to debug problems. Don't do it. You're better than that.

Omitting them is simply a bad practice whatever your reasons.

[Riekus van Montfort]

I just wanted to express my appreciation for the Kurt Vonnegut reference. Also, semicolons, because more readable

[Pacharapol Withayasakpunt]

Personally, I write all of my code with semicolons. and also "", so that I can use IIFE, especially async IIFE.

Double quotes, so that I don't forget when I program in other programming languages.

Also, double space, rather than Tab.

Never have been in a corporate env where everything is forced, though.

[Sreram K]

I am a beginner to JavaScript, but from reading this I think it will be unacceptable to not use semicolon whenever possible!

It makes sense to omit semicolon in a language like python as every line break functions as a statement terminator. But if the statement termination is being inferred from the grammar rules, this is where you must ask: why is this even allowed in the first place?

[Eternia]

Your reason is one which makes sense the most; by comparing it with Python. I can live without semicolons if the language I am using disregard them to begin with. But if the language actually needs them and the interpreter adds them for me by following three simple rules; I would rather add them myself!