JavaScript’s Semicolon; A Brief Guide

Stephen McKeon
Tech at Power
Published in
3 min readAug 11, 2020

--

The debate over whether one should include semicolons in their JavaScript has been around since Automatic Semicolon Insertion (ASI) was added to JavaScript. Most people fall into one of two camps:

  • those who refuse to use semicolons in their JavaScript, or
  • those whose religion revolves around adding semicolons to their JavaScript

But, whichever camp you’re in, I’ll at least clarify what exactly is going on behind the scenes with ASI and explain when you need semicolons and when you don’t.

So let’s make this clear right off the bat: semicolons are not required! Well, except when they are… Maybe it’s not so clear after all. Let’s break this down — in JavaScript (and many other programming languages like C, C++, Java, C#, just to name a few) the statement ending character is a semicolon. A developer can choose to either manually insert a semicolon at the end of a statement or rely on Automic Semicolon Insertion (ASI) which allows one to omit a semicolon by automatically inserting one in certain situations.

“For convenience, however, such semicolons may be omitted from the source text in certain situations. These situations are described by saying that semicolons are automatically inserted into the source code token stream in those situations.“

- ECMAScript Language Specification

Simply, if a developer does not explicitly use a semicolon, the JavaScript engine will automatically insert one in certain cases based on a set of rules. Let’s take a look at those rules:

  1. when the next line starts with code that breaks the current one (code can spawn on multiple lines)
  2. when the next line starts with a }, closing the current block
  3. when the end of the source code file is reached
  4. when there is a return, break, throw, or continue statement on its own line

Based on these rules, let’s look at some code and see if we can predict what’s going to happen:

const a = 1
const b = 2
const c = a + b
(a + b).toString()

You might think that this would return "3", but you would be wrong! Instead, we get the error TypeError: b is not a function because based on rule 1, JavaScript tries to interpret the code as:

const a = 1
const b = 2
const c = a + b(a + b).toString()

Another example based on rule 4:

(() => {
return
{
name: 'fred'
}
})()

You’d expect the return value of this immediately-invoked function to be an object that contains the name property, but it’s not. Instead, it’s undefined because JavaScript inserts a semicolon after return. Instead, you should put the opening bracket right after return:

(() => {
return {
name: 'fred'
}
})()

To conclude, as developers, we have the choice to explicitly insert semicolons or rely on ASI to insert them for us during parsing. The choice is ultimately ours and as long as we’re aware of the ASI rules, we should have no problem omitting them from our code. I prefer to omit semicolons from my code, but now that you understand exactly what’s going on, you can make an informed decision and feel confident going forward as a JavaScript developer, with or without semicolons.

This post is written by a Power Code Academy Student Developer.

--

--