Deep Tech Point - learn tech easy way

Semicolons are optional in JavaScript, but sometimes they’re not. Wait, what? Are they optional or not?

Yes, semicolons in JavaScript divide the community – some developers like to avoid them, while others prefer to use them always, no matter what. This optional semicolon insertion is possible because JavaScript does not strictly require semicolons. Instead, JavaScript inventors created a process called Automatic Semicolon Insertion (ASI), so when there is a place in JavaScript where a semicolon is required, JavaScript will insert it behind the scenes. This (ASI) does not mean that JavaScript will actually add semicolons into your code. Instead, ASI represents a set of rules that determine whether a semicolon will be interpreted in certain spots in the code.

However, you should look a bit deeper into Automatic Semicolon Insertion and learn the rules generated around semicolons. This way you will not write a code that behaves differently than you would expect.

So, what are the rules of JavaScript Automatic Semicolon Insertion?

The JavaScript parser will automatically insert a semicolon when:

you will start the next line with code that breaks the current one
you will start the next line starts with a }, this way closing the current block.
you will use return, break, throw and continue statement on its own line
the source code file reaches the end.

OK, so let’s take a look at these ASI rules through a few examples.

ASI will add a semicolon when it comes across a line terminator or a ‘}’ that is not grammatically correct, for example:

var a
var b
// ASI will work this out like so
var a;
var b;

In the following example:

var c
d =
white;

// ASI will interpret a semicolon because the syntax doesn't expect to see d after c
var c;
d = white;

As already mentioned in the briefs above, there are specific places in the syntax where, if a line break appears, it terminates the statement unconditionally and ASI will consequently interpret a semicolon. One example of this is return statements, but also break, throw and continue statements on their own line. In this example let’s take a look at a return statement:

function getCarProps() {
   return
   {
      brand: "BMW",
      model: "X6"
   }
}

// code written above would trigger ASI and result in

function getCarProps() {
   return;
   {
      brand: "BMW",
      model: "X6"
   }
}

So, in order not to trigger ASI and cause an unwanted error, all expressions in a return statement (but also break, throw and continue statements) should begin on the same line. As written below, to avoid triggering ASI, you should put the opening bracket right after return, like this:

function getCarProps() {
   return {
      brand: "BMW",
      model: "X6"
   }
}

Also, here is another example based on the expressions in a return statement:

(() => {
   return
   {
      brand: "BMW",
      model: "X6"
   }
})()

Do you expect the return value to be an object that contains the car property? I bet you do. Well, that will not happen – JavaScript will add a semicolon after return and the result will be undefined.

// correct way
(() => {
   return {
      brand: "BMW",
      model: "X6"
   }
})()

When shouldn’t you use semicolons?

Don’t use semicolons with the following statements:

if (...) {...} else {...}
for (...) {...}
while (...) {...}

Do not use semicolon after } in a function statement:

function (arg) {...}

But, do use semicolons after using do{…} while (…); statements.

A few final thoughts about semicolons in JavaScript

ASI will probably jump in and interpret a semicolon if you put a line break where there shouldn’t be one, so be careful with that.

Do not start a new line with parentheses. The main reason for this is that the parentheses might be concatenated with the previous line to form a function call or array element reference. This way ASI might actually cause a bug in your code.

Don’t put a semicolon after a closing curly bracket }. The only exceptions are assignment statements, such as:

var obj = {};

As you can see in the last few examples you should be careful with return statements, but also break, throw and continue statements. If you return something, you must add it on the same line as the return (same goes for break, throw, and continue statements).

No matter what you decide – either to write your JavaScript with or without optional semicolons – always test your code to make sure it does what you want.

Javascript – When to use semicolon?