Why So Many Semicolons In JavaScript?

I tend to be a prolific user of semicolons in my JavaScript: var x = 1; var y = 2; if (x==y){do something}; I recently noticed that I was looking at a lot of JavaScript that doesn

Solution 1:

Many computer languages use semicolons to denote the end of a statement. C, C++, and Java are popular examples of this.

As for why people use them despite them being optional, they improve the readability of your code. In most cases it's simply done out of habit, but occasionally you need semicolons in your code to remove possible ambiguity. It's always better safe (and consistent) than sorry.

Here is an example taken from Do you recommend using semicolons after every statement in JavaScript?

// define a function
var fn = function () {
    //...
} // semicolon missing at this line

// then execute some code inside a closure
(function () {
    //...
})();

This will be interpreted as:

var fn = function () {
    //...
}(function () {
    //...
})();

Additionally, semicolons allow Javascript to be packed/minified properly. Otherwise all the statements will be mushed together into one big mess.

Solution 2:

JavaScript requires semicolons. But it does have Automatic Semi-colon Insertion.

The majority of JavaScript programmers are smarter than ASI and prefer to be explicit with their semi colons.

Solution 3:

The habit comes from fear. Fear of "broken" js compressors (I've had some problems with Plone compressors with legacy js that didn't have the var statement for example), fear of possible broken browser implementations, the list goes on. So, why not just use ; everywhere and avoid all of these pitfalls?

The problem with this approach (just always use semicolons without further explanation) is that you don't try to understand why are you doing it in the first place, you just do because someone said you to do it, and, IMHO, this can be harmful as well. And the broken compressors you had in the past are now fixed, and you keep inserting semicolons... breaking habits is hard. We just keep doing things because "we always did it".

Many new JavaScript programmers are advised to just use semicolons everywhere, and expect that if they do not intentionally use the semicolon insertion rules, they can safely ignore the existence of this entire language feature. This is not the case, because of the restricted productions described above, notably the return statement. When becoming aware of the restricted production issue, programmers may then become overly wary of linebreaks, and avoid them even when they would increase clarity. It is best to be familiar with all the rules for ASI so as to be able to read any code regardless of how it is written, and to write code that is as clear as it can be.

Here is a great resource about this subject and the source of the quote. A great read.

So which style is better? To the extent that there is an objectively “better” choice, it appears to me that the minimal-semicolon/comma-first style is slightly superior, both because it is fundamentally more scannable and because it encourages programmers to better understand the language they use.

... and the 2nd quote from a more optionated article, against always using semicolons. A great read as well.

Solution 4:

Whether to use semicolons or not is largely a matter of choice. However, in javascript, unlike many other languages, not using them can lead to unexpected results. For example,

return
    {'foo':'bar'};

will, because of javascript's automatic semicolon insertion, return nothing.

Solution 5:

This is probably going to remain a debatable question as to the origin of how this this manner of coding came to be, but it could have come from the ability to differentiate between 1 and many statements within an if conditional, which is common in most languages. And also, people could have confused syntax with JavaScript's object literal

First, you have the single statement if:

if (someNumber == 2)
  doSomething();
else
  doSomethingElse();

Then, you have the multi-statement if (no semi-colon needed):

if (someNumber == 3) {
  doThisFirst();
  doThisSecond();
} else
  doSomethingElse();

This syntax could also be confused with JavaScript's object literal, which does need a semi-color:

var SomeObjectLiteral = {
  property: 2,
  doSomething: function() {
  }
};

Basically, the semi-colon is important in Javascript to determine where a command, or definition, ends. And Braces are just as important to determine blocks of these commands. But, you can have as many semi-colons as you want. If in doubt, use a semi-colon, but be prepared if someone calls you out for not needing one :)