Why these unambiguous expressions are different in JavaScript?

Question

doing some JavaScript learning and playing around with the syntax. In JavaScript semicolons are optional. It is recommended to use them, but it seems the specification does not impose them in some cases. In particular it is said that when there is no ambiguity, then it does not make a difference whether you use them or not.

I found this example (an exercise from a blog I googled), but no explanation. I think the semicolon should not make a difference here, but it does. I don't see an ambiguity here, why is it supposed to be different. I tried to play around with some examples, it really seems different. Can't wrap my head around that :-(

var y = x + f
(a+b).toString()

and

var y = x + f;
(a+b).toString();

Would be cool if some guru could shed light on this one.

Answer 1

The f followed by whitespace and a ( can be interpreted as a function call. Placing a semicolon will prevent this.

Answer 2

The ECMAScript Standard Specification mentions the rules of Automatic Semicolon Insertion in section 11.9.1, and the second rule described there is what we need to read:

When, as the Script or Module is parsed from left to right, 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 ECMAScript Script or Module, then a semicolon is automatically inserted at the end of the input stream. _{emphasis mine}

So there we go. In over-simplified layman language, the semi-colon is inserted if continuation of parsing doesn't give us valid code.

In your case, if we continue parsing the code, we do get valid ECMAScript code as follows: (since JavaScript isn't white-space sensitive)

var y = x + f(a+b)...

Thus, a semicolon will not be inserted.

Exceptions to this are described in the third rule (like return and yield keyword usage), but they don't apply in your code.