/ javascript

Semicolons cannot save you!

If you have used interpreted languages like Ruby, Python or JavaScript, then you know that semicolon ; is an optional delimiter to terminate the code instructions in these languages.

But for now, let us focus on JavaScript.


JavaScript, the language has this feature called Automatic Semicolon Insertion, often referred to as ASI.

Automatic Semicolon Insertion what it sounds like:
If you don’t add a semicolon at the end of a line, the interpreter will add one for you while parsing your code.

Mostly, this works, but it sometimes result in really nasty errors.

function randomNumberA() {
  return 4 // determined by fair dice roll
} 
function randomNumberB() {
  return 
    4 // determined by fair dice roll
}
The first function will return 4, while the second one returns undefined, because the interpreter will interpret the code by adding semicolons like this:
function randomNumberA() {
  return 4; // determined by fair dice roll
} 
function randomNumberB() {
  return;
    4; // determined by fair dice roll
}

Almost everyone agrees that Automatic Semicolon Insertion is a stupid feature. It should not be in JavaScript. It is a super dumb feature.

Because this is a dumb feature, you will hear or read that “you should never rely on automatic semicolon insertion”.

But that doesn't work, ASI cannot be turned OFF. It’s there, and it’s going to work stupid all the time.

Let’s take a look at the last function with the ASI error, but with a semicolon added correctly:
function randomNumberB() {
return
4; // determined by fair dice roll
}
… this will still return undefined, because the interpreter will do this:
function randomNumberB() {
return;
4; // determined by fair dice roll
}

This is JavaScript. It’s a great little language, but this is one of it’s warts, and you have to deal with this. You cannot semicolon it away.


** Few of the cases when ASI will not work, is when you begin a line with a parenthesis or a square bracket, like this:**

Expect the ASI to put a ; at the end of line 1
var name = { Goodbye: [1,2,3]}
['Hello', 'Goodbye'].forEach(function(value) {
console.log(value + " " + name + "
")
})

But the interpreter is looking at it, like this:
var name = { Goodbye: [1,2,3]}['Hello', 'Goodbye'].forEach(function(value) {
console.log(value + " " + name + "
")
})

Result
// 1 undefined

// 2 undefined

// 3 undefined

Let's put the ; where it should be:
var name = { Goodbye: [1,2,3]};
['Hello', 'Goodbye'].forEach(function(value) {
console.log(value + " " + name + "
")
})
Result
// Hello [object Object]
// Goodbye [object Object]

Also, it’s the same thing when you begin a line with a parenthesis, like this:
a = b + c
(d + e).print()

the above will be evaulated as:
a = b + c(d + e).print();

Those are the only cases known of where adding semicolons will protect you against ASI errors. All the other errors will still be in effect if you add semicolons everywhere.


*The ASI is always there, and and you need to be always vigilant about it, no matter if you add semicolons or not.