Home / FAQs / Semicolons in JavaScript: Are they necessary?

Semicolons in JavaScript: Are they necessary?

OpenJavaScript

FAQs

August 26, 2022 0

Last updated: August 29, 2022.

Is it necessary to include semicolons when writing JavaScript?

This is a question which divides the community.

In practice, the answer is often no but sometimes yes.

To understand why, we need to talk about Automatic Code Insertion (ASI) in JavaScript.

Seriously GIFfrom Seriously GIFs

Automatic Code Insertion (ASI) in JavaScript

At runtime, semicolons are required to distinguish between the end of one line and the next one.

The reason code often doesn’t break when semicolons are omitted from a script is because they are added automatically by the parser.

But parser isn’t so intelligent that it can always distinguish between one line and the next one without a semicolon.

Let’s look at some examples.

Code examples

The following code snippet runs perfectly fine depsite including no semicolons:

const x = 3
const y = 5

const res = 5 + 3

console.log(res)

Behind the scenes, ASI does a great job of adding semicolons where necessary.

But take the following example:

const x = "bike"

['fav transporter', x].forEach((item) => {
  console.log(item.toUpperCase()) // FAV TRANSPORTER, BIKE
})

Run this code and you will get the following error:

Uncaught ReferenceError: Cannot access 'x' before initialization

The reason for this is that the parser interprets the code like this:

const x = "bike"['fav transporter', x].forEach((item) => {
  console.log(item.toUpperCase()) // FAV TRANSPORTER, BIKE
})

Probably the most common example of a semicolon breaking code is when one is omitted before a self-executing function:

const name = "Kiefer William Frederick Dempsey George Rufus Sutherland"

(() => {
  console.log(name)
})()

This returns the following error:

Uncaught TypeError: "Kiefer William Frederick Dempsey George Rufus Sutherland" is not a function

And this is because the code is being interpreted like this:

const name = "Kiefer William Frederick Dempsey George Rufus Sutherland"(() => {
  console.log(name)
})()

The self-executing function is being intrerpreted as a method existing on "Kiefer William Frederick Dempsey George Rufus Sutherland"!

This can be corrected with a semicolon:

const name = "Kiefer William Frederick Dempsey George Rufus Sutherland";

(() => {
  console.log(name); // "Kiefer William Frederick Dempsey George Rufus Sutherland"
})()

Are semicolons necessary in JavaScript?

As the examples in this post have shown, you can often get away without including semicolons. But there are cases where ASI will fail and code will break.

So, are semicolons necessary?

Often not, because ASI will come to the rescue.

But to say they are completely optional is false. You can break your code by omitting semicolons. And you may have noticed that when the code does break, the error messages aren’t particularly diagnostic. In a larger script this can lead to debugging problems.

By using semicolons, you are preventing these breaks from occuring.