Semi-colons! Admittedly, not the most interesting of topics, however, this little piece of syntax has been the subject of the most controversial feature addition in Javscript: Automatic Semicolon Insertion.
Now this feature, like most language editions, was meant to be a useful edition to the language, but, due to it’s implementation, it’s use cases weren’t seen as worth the risk.
ASI seemed to work…but only most the time. When it didn’t, it confused the heck out of developers, with cryptic compiler errors everywhere.
Quite soon after it’s introduction into the language it’s usefulness was more than put just into question by a number of figures. With mentors such as Douglas Crockford still condemning the feature, and modern companies neglecting them in their company’s code style guides, there is still quite a divide in opinion on when, or if, you should use semicolons.
A Little History Behind Semicolons in Javascript
Javascript is a C-style language. That meaning, a major part of its syntax, like curly braces for code blocks or standard function declarations, were directly inherited from the C language. So naturally, semi-colons were one of those inherited features that got carried into this dinky little programming language for the browser.
Eventually though, a new feature of the language was released. It was called Automatic Semicolon Insertion(ASI). This feature was meant as to prevent those pesky parse errors caused by forgotten semi-colons in one’s code.
The general rule with ASI is as long as there is a line break separating statements it should run just fine in the compiler.
The keyword is should. Meaning that there are exceptions to the rules.
This is where we’re going to do a little deep dive into these the exceptions to the rule, in order to catch a glimpse of these illusive parse errors as they happen in the wild. This hopefully will give you an exact idea as to when you should use semi-colons when writing your code.
Example #1
The first instance where semi-colon insertion can often fail is during any kind of variable declaration. This means whether you’re using const, var, or let; a semicolon should always follow a declaration.
let lemon = {taste: “sour”,color: “yellow”,texture: “idk, it’s a lemon”};
Example #2
Function giveUserADog(){return{Emotion: “eternal happiness”}}
This second example is a famous one. Because contrary to what most C programmers would believe, this function will return an `undefined`. This happens when you have the contents of a return statement beginning on the next line. Here the ASI sees the return statement as complete and inserts a semicolon immediately following the return statement.
But there is a quick fix! Simply place an opening parenthesis immediately following the return statement, and another at the end of the code being returned. Ex:
function giveMeMoney(){return (" reverse me baby ".trim().split("").reverse().join())}
This is a common React programming practice to get around the ASI’s return statement behaviour and it works for any and every situation.
Note: if you’re returning an object or array literal, just use the opening brace/bracket on the same line as the return statement.
Example #3
This following example happens anytime a line of code opens with a parenthesis.
let steak = bbq.grill("rib-eye")(function(){///some code and stuff})()
There has to be a semi-colon on the preceding statement. This is an absolute must! If the previous line goes without a semi-colon, the Javascript interpreter will attempt to run the object on the previous line as either a function or as a property assessor (think the brackets when accessing an array’s contents).
See now was that so difficult? Probably. Syntax specifics can be awful to learn. But with any luck it will prevent you from causing the same compiler errors over and over again.
Hopefully this will have saved you at least one unnecessary headache.