DEV Community

loading...

Semicolons in JavaScript: To Use or Not to Use?

adriennemiller profile image adriennemiller Updated on ・3 min read

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 semicolon drawing
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.

keep calm it's only a semi colon
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?

Discussion (19)

pic
Editor guide
Collapse
somedood profile image
Basti Ortiz (Some Dood)

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.

Collapse
zyzmoz profile image
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!

Collapse
adriennemiller profile image
adriennemiller Author

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

Collapse
brigittavarga profile image
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.

Collapse
elmuerte profile image
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.

Collapse
elarcis profile image
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).

Collapse
outlawgametools profile image
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?

Collapse
rapmendoza profile image
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.

Collapse
dlopez831 profile image
David Lopez (Argen.)

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

Collapse
patarapolw profile image
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.

Collapse
riekus profile image
Riekus van Montfort

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

Collapse
fasani profile image
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.

Collapse
bsorrentino profile image
bsorrentino

Thanks for this article

I had underestimated that question assuming it was a negligible detail

Collapse
zimaben profile image
Benny T

I don't find semicolons any more readable than their absence...but when I skip them I generate a lot more errors when I'm coding in other languages.

I don't mind the extra keystroke as much as I do clearing like 8 500 errors on a page because i zoned into no-semis mode.

Collapse
fchaplin profile image
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.

Collapse
balachalasani profile image
Bala Chalasani

There is a typo in point 1 example 2 in the ASI interpreted code:

Should be

var a;
b = 5;

Instead of:

var a;
b = 3;

Collapse
adriennemiller profile image
adriennemiller Author

Thanks, updated!

Collapse
kenyo profile image
Ken Yo

Good reading!

Collapse
vuongtran21 profile image
vuongtran

My thinking is still using semicolons for convention and readable code. I'm writing application using Vuetify, and default eslint setting without semicolons. That make me feel not comfortable with it.