Should you use semicolons in JavaScript?

It’s a topic that could seem trivial at first sight, but it actually causes some controversy among JavaScript developers. Semicolons, yes or no?

The syntax of JavaScript, just like many other languages, is based on the C programming language. In that language, semicolons are necessary to end a statement (i.e. an instruction.)

But JavaScript interpreters use Automatic Semicolon Insertion, a system that “inserts” semicolons before a line break in some circumstances. It doesn’t literally insert it in the code, the interpreter acts as if there were a semicolon where ASI decides to.

For example, In the following code:

const myName = "Nico"
const myLastName = "Zerpa"
console.log(`My full name is ${myName} ${myLastName}`)

The ASI system will add semicolons after "Nico" on line 1, after "Zerpa" on line 2, and after the closing parenthesis on line 3.

The exact rules of automatic semicolon insertion can be found on the official JavaScript/ECMAScript specification.

The problem is that omitting semicolons can lead to ambiguous code in some cases where ASI doesn’t work as you may expect. Here’s an example of this:

function getData() {
  return
  {
    name: "Mel",
    age: 49,
    favoriteFood: "Pizza"
  }
}

const melData = getData()
console.log(`Her name is ${melData.name},
  she's ${melData.age}
  and she loves ${melData.food}`)

The code above doesn’t work because ASI insert semicolons in an unexpected place: after the return keyword on the second line. On top of that, the JS interpreter gets confused. Due to the added semicolon, it mistakenly thinks the object is a block of code. That triggers a syntax error.

Those kind of problems could be solved if you simply learn when ASI inserts a semicolon. However, coding is almost always a team work. Even if you know the ASI rules by heart, other developers may not, and they could not read the code properly.

For that reason, I decided to use semicolons. It’s clearer for everyone, even for the JS interpreter.