What are the rules for JavaScript's automatic semicolon insertion (ASI)?

Question

Well, first I should probably ask if this is browser dependent.

I've read that if an invalid token is found, but the section of code is valid until that invalid token, a semicolon is inserted before the token if it is preceded by a line break.

However, the common example cited for bugs caused by semicolon insertion is:

return   _a+b; 

..which doesn't seem to follow this rule, since _a would be a valid token.

On the other hand, breaking up call chains works as expected:

$('#myButton')   .click(function(){alert("Hello!")}); 

Does anyone have a more in-depth description of the rules?

Answer 1

I could not understand those 3 rules in the specs too well -- hope to have something that is more plain English -- but here is what I gathered from JavaScript: The Definitive Guide, 6th Edition, David Flanagan, O'Reilly, 2011:

Quote:

JavaScript does not treat every line break as a semicolon: it usually treats line breaks as semicolons only if it can’t parse the code without the semicolons.

Another quote: for the code

var a a = 3 console.log(a) 

JavaScript does not treat the second line break as a semicolon because it can continue parsing the longer statement a = 3;

and:

two exceptions to the general rule that JavaScript interprets line breaks as semicolons when it cannot parse the second line as a continuation of the statement on the first line. The first exception involves the return, break, and continue statements

... If a line break appears after any of these words ... JavaScript will always interpret that line break as a semicolon.

... The second exception involves the ++ and −− operators ... If you want to use either of these operators as postfix operators, they must appear on the same line as the expression they apply to. Otherwise, the line break will be treated as a semicolon, and the ++ or -- will be parsed as a prefix operator applied to the code that follows. Consider this code, for example:

x  ++  y 

It is parsed as x; ++y;, not as x++; y

So I think to simplify it, that means:

In general, JavaScript will treat it as continuation of code as long as it makes sense -- except 2 cases: (1) after some keywords like return, break, continue, and (2) if it sees ++ or -- on a new line, then it will add the ; at the end of the previous line.

The part about "treat it as continuation of code as long as it makes sense" makes it feel like regular expression's greedy matching.

With the above said, that means for return with a line break, the JavaScript interpreter will insert a ;

(quoted again: If a line break appears after any of these words [such as return] ... JavaScript will always interpret that line break as a semicolon)

and due to this reason, the classic example of

return {    foo: 1 } 

will not work as expected, because the JavaScript interpreter will treat it as:

return;   // returning nothing {   foo: 1 } 

There has to be no line-break immediately after the return:

return {    foo: 1 } 

for it to work properly. And you may insert a ; yourself if you were to follow the rule of using a ; after any statement:

return {    foo: 1 }; 

Answer 2

First of all you should know which statements are affected by the automatic semicolon insertion (also known as ASI for brevity):

• empty statement
• var statement
• expression statement
• do-while statement
• continue statement
• break statement
• return statement
• throw statement

The concrete rules of ASI, are described in the specification §11.9.1 Rules of Automatic Semicolon Insertion

Three cases are described:

1. When an offending token is encountered that is not allowed by the grammar, a semicolon is inserted before it if:

• The token is separated from the previous token by at least one LineTerminator.
• The token is }

e.g.:

    { 1     2 } 3 

is transformed to

    { 1     ;2 ;} 3; 

The NumericLiteral 1 meets the first condition, the following token is a line terminator.
The 2 meets the second condition, the following token is }.

2. When the end of the input stream of tokens is encountered and the parser is unable to parse the input token stream as a single complete Program, then a semicolon is automatically inserted at the end of the input stream.

e.g.:

    a = b     ++c 

is transformed to:

    a = b;     ++c; 

3. This case occurs when a token is allowed by some production of the grammar, but the production is a restricted production, a semicolon is automatically inserted before the restricted token.

Restricted productions:

    UpdateExpression :         LeftHandSideExpression [no LineTerminator here] ++         LeftHandSideExpression [no LineTerminator here] --          ContinueStatement :         continue ;         continue [no LineTerminator here] LabelIdentifier ;          BreakStatement :         break ;         break [no LineTerminator here] LabelIdentifier ;          ReturnStatement :         return ;         return [no LineTerminator here] Expression ;          ThrowStatement :         throw [no LineTerminator here] Expression ;       ArrowFunction :         ArrowParameters [no LineTerminator here] => ConciseBody      YieldExpression :         yield [no LineTerminator here] * AssignmentExpression         yield [no LineTerminator here] AssignmentExpression 

The classic example, with the ReturnStatement:

    return        "something"; 

is transformed to

    return;       "something";