Recently, one of my students asked me, "Is there an easy way to know when to use a semicolon at the end of a line of JavaScript? It seems like sometimes we use it and sometimes we don't." If you are wondering about this too, here is a quick reference for when and when not to use semicolons in JavaScript.
Before we get into where semicolons should and should not go in JavaScript, let's first address the issue of whether or not they are needed at all.
Why use semicolons in JavaScript at all?
There is some debate about whether semicolons are needed in JavaScript at all.
Many developers have opted out of using semicolons for many reasons. Some come from languages, like Python, that do not use semicolons, Some feel that semicolons make code look ugly, and it is difficult to remember when and when not to use semicolons in JavaScript. So, if you can get away with not using them, then why bother?
You dont have to
It's true, if you leave (most) semicolons out of your JavaScript code, the browsers isn't going to freak out. So, why would you use them if you don't have to?
For me its a bit of habit and I also like to do things "the JavaScript way". I don't come from a semicolon-less language so its no big deal to me. In fact, I use a code linter that yells at me when I don't put semicolons in the right places. I also know that when JavaScript is minified, meaning all the whitespace is removed and all code is fit on one line, that semicolons are required to signify to end of a statement. Typically minification is done by a build script after development is completed so it still doesn't require you to put semicolons in your unminified source code. Its just a reason I use to justify my use of semicolons.
It is true that if you have two statements on the same line, YOU MUST terminate the first statment with a semicolon. If you remove the semicolon after true
in the code below, and run it in JSBin, you'll get a SyntaxError.
var isOk = true; if(isOk){ console.log("It's OK.") }
With that said, if I had to work on a team that decided not to use semicolons, I'd be fine with it. There are way more important things to be worrying about.
Now, if you, like me, want to stick with using semicolons in your JavaScript, here is how to know where they should go:
Semicolons are needed at the end of JavaScript 'statements'
Lots of things qualify as a statement in Javascript. Here are some examples:
// variable declaration (assigning a number or other value to a name)
var i = 0;
//variable declaration (assigning an object to a name)
var myObject = {};
//variable declaration (assigning a function expression to a name)
var doSomething = function(){ ...};
// method call
console.log('hello');
// function call
doSomething();
Semicolons are NOT needed at the end of a 'code block'
Code blocks are sets of statements surrounded by curly braces.
(Objects are {key:value} pairs and don't count as code blocks.)
// function declaration
function doSomething (){
// semicolons follow statements within the { code block }
console.log('Doing something...);
} //no semicolon here
// conditional code blocks
if(true){
doSomething();
} // no semicolon here
// for loop code blocks
for(i=0; i<array.length; i++){
doSomething();
} // no semicolon here
A Catch
You might have noticed that in for loops we do use semicolons to separate the iteration rules within the parentheses like this: (i=0; i<array.length; i++)
. A semicolon comes after the first and second iteration rules but not the third.