Semicolons in JavaScript — are they important?

(function(){ let canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), w = canvas.width = innerWidth, h = canvas.height = innerHeight, particles = [], properties = { bgColor : 'rgba(17, 17, 19, 1)', particleColor : 'rgba(255, 40, 40, 1)', particleRadius : 3, particleCount : 60, particleMaxVelocity : 0.5, lineLength : 150, particleLife : 6, }; document.querySelector('body').appendChild(canvas); window.onresize = function() { w = canvas.width = innerWidth; h = canvas.height = innerHeight; } class Particle { constructor() { this.x = Math.random()*w;

Section notes from the book: JavaScript: The Definitive Guide by David Flanagan

The semicolon (;) in JavaScript is used to separate statements from one another. Some programmers use semicolons to explicitly mark the end of statements, even when they are not required, while others omit semicolons whenever possible.

In the latter case, you should be careful, because the JavaScript interpreter does not treat every line break as a semicolon.

The JavaScript interpreter treats a line break as a semicolon if the next non-whitespace character cannot be interpreted as a continuation of the current statement.

Let’s look at the following example:

JavaScript

1let x
2x
3=
48
5console.log(x)
6
7// the JavaScript interpreter will interpret it as:
8let x; x = 8; console.log(x);

The interpreter cannot parse the code let x x without a semicolon. The second line break is treated differently because the interpreter can continue parsing it as part of a longer statement, such as a = 3;.

The following example looks like two separate statements separated by a newline:

JavaScript

1let a = b + c
2(d+l).toString()

However, the parentheses on the second line can be interpreted as a function call on the value from the first line. As a result, the JavaScript interpreter treats the code as follows:

JavaScript

1let a = b + c(d+l).toString()

To avoid problems like this, you should use a semicolon if the next statement begins with one of the following characters: (, [, /, +, or -.

If you cannot place a semicolon at the end of the previous statement, you can instead use a defensive semicolon at the beginning of the potentially ambiguous statement.

JavaScript

1let n = 0 // The semicolon is omitted here.
2;[y, y + 2, y + 4].forEach(console.log) // The defensive semicolon keeps this statement separate.

A line break is always interpreted as a semicolon in the following cases:

After the return, throw, yield, break, and continue statements.

With the ++ and -- operators. If you use either of these operators in their postfix form, they must appear on the same line as the expression they apply to.

With arrow functions. The => token must appear on the same line as the parameter list.