JS: Semicolon Rules

By Xah Lee. Date: . Last updated: .

There are 2 schools of thought on semicolon. The old school, recommend to add semicolons. The new school, becoming more popular after 2015, recommend omitting semicolons.

This page shows the rules of each school, and details on why.

Omit Semicolon School

Here's rules if you want to omit semicolon:

  1. Do not use semicolon, except:
  2. A Line should never start with parenthesis () or square bracket []. If so, add a semicolon in the beginning of line (or end of previous line).

Watch this short video for excellent explanation.

Are Semicolons Necessary in JavaScript? by Kyle Robinson Young.

Advantage of Omitting Semicolon

Disadvantage of Omitting Semicolon

Add Semicolon School

Here's rules if you want to use semicolon:

ALWAYS add semicolon after expression at top-level. For example:

  1. var x = …;
  2. var x = function () {};
  3. (function () { … }()); (immediately invoked function expression.)

The following does not require semicolon, but having one doesn't hurt.

A redundant semicolon is a empty statement. Extra semicolon won't hurt normally, but is not allowed when expression are expected, such as in function argument.

Using Semicolon in Practice

Here's code examples using semicolon.

Variable Assignment

Always use semicolon at end of variable assignment.

var x = 4; // ← add semicolon

var y = {p1:1, p2:2}; // ← add semicolon

var f = function() { return 3; }; // ← add semicolon

Function Declaration

For function declarations, no need semicolon.

// function declaration
function f1() {
    // ...
} // semicolon not required here

Function as Argument

When using function expression as a argument, you must not have semicolon. Example:

// function expression as argument, semicolon not allowed
addEventListener("click",
    function () {
        // ...
    } // ← semicolon not allowed
, false)

Last Statement Inside a Function Definition

return statement requires a semicolon.

function ff() {
    return 3; // ← semicolon is technically required here
}

No Multi-Line Return Statement

Never have a return statement by itself on a line.

// bad
function ff() {
    return
    [3,4,5];
}

// this is bad. JS will add a semicolon at end of return.
// so the function will just return undefined

console.log(ff()); // undefined

Function Call

A function call, returns a expression.

// function call

(function () {
    return 3;
})(); // better add semicolon here

Example of Bad Omitted Semicolon

// you intended to assign the first function, and eval the second

// js compiler tried to feed the second function as arg to your first function

var f = function() {
    return 3;
} // bad semicolon omission

(function() {
    return 4;
})();

// compiler error

// /home/jane/test.js:7
// })();
//   ^

// TypeError: (intermediate value)(...) is not a function
//     at Object.<anonymous> (/home/jane/test.js:7:3)
//     at Module._compile (module.js:434:26)
//     at Object.Module._extensions..js (module.js:452:10)
//     at Module.load (module.js:355:32)
//     at Function.Module._load (module.js:310:12)
//     at Function.Module.runMain (module.js:475:10)
//     at startup (node.js:117:18)
//     at node.js:951:3

Why is JavaScript Semicolon Rule So Complex?

  1. JavaScript the language spec has complex syntax involving semicolon. It's not simply “add semicolon after statement”, because what's a “statement” isn't simple.
  2. But JavaScript the spec also specifies a “Automatic Semicolon Insertion”, which specifies how the compiler should automatically add a semicolon when there's a syntax error.

Ok, so, the JavaScript compiler automatically add semicolons, great, end of story, right?

No, because:

JavaScript syntax isn't systematic. There's no way to figure out where is the intended place for semicolon. So, automatic semicolon insertion does not work reliably.

Semicolon Rule

Certain ECMAScript statements (empty statement, let, const, import, and export declarations, variable statement, expression statement, debugger statement, continue statement, break statement, return statement, and throw statement) must be terminated with semicolons. Such semicolons may always appear explicitly in the source text. 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 2015 §ECMAScript Language: Lexical Grammar#sec-automatic-semicolon-insertion]

Who Recommend Semicolon?

Who Omits Semicolon?

The style library http://standardjs.com/ 163 thousand downloads per month as of 2016-05-14, do not recommend semicolon. by JavaScript expert Feross Aboukhadijeh.

Famous Semicolon War

javascript semicolon war 2012 crockford vs fat
JavaScript semicolon war, 2012, Douglass Crockford vs fat (twitter engineer)

Reference

ECMAScript 2015 §ECMAScript Language: Lexical Grammar#sec-rules-of-automatic-semicolon-insertion

Like what you read? Buy JavaScript in Depth