Always use semicolons! When JavaScript encounters a line break without a semicolon, it uses a set of rules called Automatic Semicolon Insertion to determine whether or not it should regard that line break as the end of a statement, and (as the name implies) place a semicolon into the code before the line break. ASI contains a few eccentric behaviors which might break the code if JavaScript misinterprets a line break. These rules will become more complicated as new features become a part of JavaScript. Explicitly terminating statements and configuring linters to catch missing semicolons will help to prevent from encountering issues.

References

• ECMAScript 2018 Specification
• StackOverflow: "Semicolon before self-invoking function?"

ESLint: semi

Examples

⇣ Incorrect code for this rule:

const snow = {}
const frost = {}
[snow, frost].forEach(element => season.name = "winter") // ReferenceError: season is not defined

const winter = "Sparkling and frozen!"
(async function season(){
  // ...
}())

function winter() {
  return
    "The winter season is sparkling and frozen!"
}
// Returns "undefined" instead of the value on the next line.
// Always happens when "return" is on a line by itself because of ASI!
winter()

⇡ Correct code for this rule:

const snow = {};
const frost = {};
[snow, frost].forEach(element => {
  season.name = "winter";
});

const winter = "Sparkling and frozen!";
(async function season(){
  // ...
}());

function winter() {
  return "The winter season is sparkling and frozen!";
}