Optional Semicolon in JavaScript

Optional Semicolon in JavaScript

4 min. read

JavaScript uses semicolon(;) to seperate statements from each other just like other programming languages C, C++, PHP etc.

Why semicolon is important?

  1. Without it logical errors may occur in the program.
  2. It helps the programmer to clearly distinguish between two program statements.
  3. It clearly specifies meaning of the code, without semicolon or seperator end of one statement might seem to be the start of the next statement or vice-versa.

In JavaScript, if two statements are written on two seperate lines then semicolon after the first statement can be omitted usually. So we can say semicolon is optional after the first statement in that case, but that is not the case always.

Consider the examples below:

Example 1

x = 5; // Statement 1
y = 7; // Statement 2

Since two statements are on seperate lines semicolon after first statement can be omitted, so above lines of code can also be written as:

x = 5 // Statement 1
y = 7; // Statement 2

The above two lines will be interpreted by JavaScript as:

x = 5; y = 7;

However when writing both statements on same line semicolon after first statement is required.

x = 5; y = 7;

Example 2

var f = x // Statement 1
(a + b).toLowerCase(); // Statement 2

JavaScript will interpret the above lines of code as:

var f = x(a + b).toLowerCase();

Here JavaScript does not treat line break after first statement as semicolon and during runtime it will call function x(a + b) and then will convert the returned value to lowercase, this behaviour you might have not intended.

In this case an explicit semicolon is required after the first statement.

After going through both examples above we have seen that "JavaScript does NOT treat every line break as semicolon".

The concept, the general rule is:

JavaScript does not treat every line break as semicolon. It only treats a line break as semicolon iff the next nonspace character cannot be interpreted as the continuation of the current statement.

Explanation

In example 1 if semicolon is not used after first statement then JavaScript cannot interpret both statements without a semicolon(a seperator) after the first statement.

x = 5 // Statement 1
y = 7; // Statement 2

JavaScript sees the above two statements as

x = 5 y = 7;

and it cannot interpret them because 5 y does not make sense it is not an identifier neither an expression, it is not a valid part of a statement, so JavaScript treats line break after first statement as semicolon.

In example 2 JavaScript does not treat line break after first statement as semicolon because second statement can be interpreted as continuation of the first statement.

var f = x(a + b).toLowerCase();

This statement is a valid JavaScript statement.

Conclusion

We have seen that omitting semicolon might not give us the intended result, so we should use semicolon after every statement or if you don't want to use it after every statement then take care that if next statement can be interpreted as continuation of the current statement then put a semicolon at the end of current statement.

However there are some exceptions to the general rule that we have discussed here.

Those exceptions are discussed in the Part 2 "Exceptions to the JavaScript optional semicolon rule".

Continue reading...

Write comments