Sup With Those Damn Semicolons in JS?

Are they really necessary? They’re ugly!

History

JavaScript is not perfect, although it has significantly improved since its inception at Netscape (early browser). It was envisioned as a simpler alternative to Java for building scripts on the web. Marc Andreessen (Netscape co-founder) recruited Brendan Eich to build a prototype, which he did in 10 days. JavaScript was born.

Since its humble beginnings, JavaScript is now THE language of the web. Given that the language was built to be accessible to beginners, it has some unfortunate quirks that we need to watch out for and semicolons are likely the first you will encounter.

Semicolons

Beginners are told to put semicolons at the end of every line (or “statement”) to signify that a line ends, without much explanation.

var i = 0; // goodvar j = 0 // bad

Other programming languages don’t need them so why does JavaScript?

JavaScript doesn’t pay attention to spacing (to make it “simpler”), so it doesn’t know that you are on a new line, it needs a semicolon to know that.

But when I leave out semicolons, my code still runs!

var i = 0i // 0

It does works a lot of the time, but not always! JavaScript uses “Automatic Semicolon Insertion” to help beginners who may have forgotten to place a semicolon. Above code is interpreted as:

var i = 0;i;

The issue is that there are exceptions. Beginners are encouraged to use semicolons so they don’t have to learn about these exceptions, but let’s go over them.

“Automatic Semicolon Insertion” Exceptions

Lines beginning with "("

// initialvar i = 0;(function(){console.log(i)})(); // 0

// no semicolonvar i = 0(function(){console.log(i)})() // TypeError: 0 is not a function

// how engine sees above0() // TypeError: 0 is not a function

JavaScript tries its best to determine the end of a line but it isn’t sure if you are trying to call a function0 with the input between the () on the next line such as 0(). Clearly 0 is not a function, it’s a number, so we get an error.

Note: I used an “immediately invoked function” because it requires parentheses around it to work, see this post for a quick explanation.

Lines beginning with "["

var i = 0;[1,2,3].pop(); // 3

var i = 0[1,2,3].pop(); // TypeError: Cannot read property 'pop' of undefined

0[1,2,3]; // undefined

The interpreter wasn’t sure if you finished expressing the value of i. It thought maybe you would try to index an array called 0 such as 0[1] but 0 is not an array so the last line is undefined. We get an error trying to call an Array method called pop on undefined, which doesn’t have any properties.

Return Statements

function foo() {return1}

foo() // undefined

return was run as return; so the function returned nothing, which is undefined. A semicolon is automatically inserted at the end of a return statement so make sure to keep the values you are returning on the same line (such as return 1) as the lines below return won’t be executed!

Interesting Cases without Automatic Insertion

Function Declarations, Conditionals, Loops

Semicolons are inserted (automatically) after “function expressions” but not after “function declarations”.

// function expressionvar foo = function() {return 0;};

NOT inserted here:

// function declarationfunction foo() {return 1}

// conditional statementsif (condition) {console.log("true");} else {console.log("false");}

// loopsfor (var i = 0; i < 10; i++) {console.log(i);}

Semicolons are not inserted after squiggly brackets { }, except for objects.

// semicolons inserted after objectvar obj = {};

So…can I stop using those damn things!?

Many well respected programmers avoid cluttering their code with semicolons. If you’re now confident you understand how they work, you have the option of omitting them as well!

Personally, I believe that using semicolons makes your code more readable to you and future readers (also makes it look legit AF). Additionally you minimize the risk of running into semicolon related errors which is especially important for beginners (then again, you’re unlikely to run into those obscure exceptions). I also like how they put an end-cap on a statement, just like this period does.

Please enjoy this video by Mattias Petter Johansson (one of the “well respected programmers who don’t use semicolons”) which was the inspiration for this post! I highly recommend his Fun Fun Function channel. I’m addicted to it. Send help!

Please comment with feedback/questions and smash that clap button!