ECMAScript Automatic Semicolon Insertion
When it comes JavaScript, the most contentious conversation that go in community is if we should use a semicolon to signify an end of a statement. The opinion goes back and forth between two extremes: “We must use semicolon” and “We should never use a semicolon”. The reason for these extremes is that many of us believe that semicolons are optional in JavaScript.
As per the ECMAScript specification, if a statement is not explicitly terminated with a semicolon, in certain situations a semicolon will be automatically inserted by JavaScript engine.
“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
In other words: certain statements in JavaScript must be terminated with a semicolon. However, if a developer does not use a semicolon explicitly, JavaScript engine would automatically insert a semicolon in certain cases based on a set of rules.
Automatic Semicolon Insertion
When it comes to automatic semicolon insertion, there are 3 basic rules that JavaScript compiler looks at, to determine whether or not it should insert a semicolon.
Rule #1
“When, as the program is parsed from left to right, an offending token is encountered, then a semicolon is automatically inserted. “
It further goes on to saying that, a semicolon is automatically inserted before the offending token only if one or more of the following conditions is true:
- The offending token is separated from the previous token by at least one LineTerminator
- The offending token is
}
As offending token is a token that is not allowed by any production of the grammar
Let’s understand this by an example.
As per rule 1, JavaScript compiler will start parsing the above code from left to right starting from line 1. It continues parsing till character ‘l’ on line 2 as it is the first token which is not allowed as per the allowed grammar. So now it has two tokens: first ‘let a = 10’ and second (offending) token ‘l’. At this point sub rule 1 comes into picture, since there is a line terminator between both these tokens, it will insert a ‘;’ after first token.
Continuing this further, it will insert semicolons at the end of line 1 and 2 which will look like below:
As per sub rule 2, it will also insert a semicolon in case the offending token is }. So it will also insert a semicolon on line 5 as below:
Rule #2
“When, as the program is parsed from left to right, the end of the input stream of tokens is encountered, then a semicolon is automatically inserted.”
This is very simple, when it reaches the end of the input stream it inserts a semicolon. As per this rule, in out example it will further insert a semicolon at the end of line 8.
Rule #3
“When, as the program is parsed from left to right, a token is encountered that is allowed by some production of the grammar, but the production is a restricted production and the token would be the first token for a terminal or non-terminal immediately following the annotation within the restricted production, and the restricted token is separated from the previous token by at least one LineTerminator, then a semicolon is automatically inserted before the restricted token.”
First and foremost, restricted production is a very fancy way of saying continue, break, return, or throw. So if we have a continue statement, a break statement, a return statement, or a throw statement, that is called a restricted production.
Restricted production means a continue, a break, a return or a throw statement
In simple words, this rules implies that when we have any of a continue, a break, a return or a throw statement and if there is a line terminator after it followed by a restricted token, then a semicolon is automatically inserted before the restricted token. Consider following example:
As per this rule, since we have a line terminator after a return on line 2 followed by a restricted token }, JavaScript compiler will insert a semicolon immediately after return as shown below.
Conclusion
For convenience, we can omit a semicolon in JavaScript. However, in certain situations semicolons are automatically inserted by the compiler. This article does not cover all the situations, but should give a decent understanding on when semicolons will be automatically inserted.
I have written another article here giving a couple of examples of unexpected behavior due to automatic semicolon insertion rules and why I always prefer to use explicit semicolons in JavaScript.
