Why does the logical or operator (||) with an empty arrow function (()=>{}) cause a SyntaxError?

Question

In my code, I have something that boils down to this:

var x = y || ()=>{};

(In case you are wondering, I am later calling x() and y may be defined as a function or it might not, so I don't want a TypeError to be thrown if it is not.)

For some reason, this causes a

SyntaxError: Unexpected token )

Why? I found out that

var x = y || (()=>{});

works just fine, but

y || ()=>{}

dosen't work. Is this specced, or a bug in V8 or Chrome? (I tested this only in the latest release of Chrome stable.)

Answer 1

This is normal. Unlike a function expression, which is a PrimaryExpression like other literals and identifiers, and arrow function specifically is an AssignmentExpression and can only appear inside grouping, comma, assignment, conditional (ternary) and yield expressions. Any other operator than those would lead to ambiguities.

For example, if you expect y || ()=>z to work, then also ()=>z || y should be expected to work (assuming symmetric precedence). That however clearly collides with our expectation that we can use any operators inside concise bodies of arrow functions. Therefore, it's a syntax error and requires explicit grouping to work and stay maintainable.

Answer 2

This is not a bug in the JavaScript engine. This behavior is documented.

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.

_{Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Parsing_order}

Answer 3

try this var x =( y || (()=>{}));