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()

Answer 1

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

Answer 2

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 3

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}