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

by

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.

More Related Contents:

  1. Are ‘Arrow Functions’ and ‘Functions’ equivalent / interchangeable?
  2. What’s the meaning of “=>” (an arrow formed from equals & greater than) in JavaScript?
  3. When should I use a return statement in ES6 arrow functions
  4. ECMAScript 6 arrow function that returns an object
  5. When should I use arrow functions in ECMAScript 6?
  6. What do multiple arrow functions mean in JavaScript?
  7. Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)
  8. Arrow function without curly braces
  9. Curly Brackets in Arrow Functions
  10. Why shouldn’t JSX props use arrow functions or bind?
  11. What are the differences (if any) between ES6 arrow functions and functions bound with Function.prototype.bind?
  12. Official information on `arguments` in ES6 Arrow functions?
  13. Syntax for an async arrow function
  14. Correct use of arrow functions in React
  15. ES6 arrow functions not working on the prototype?
  16. Arrow Function in Object Literal [duplicate]
  17. What does arrow function ‘() => {}’ mean in Javascript? [duplicate]
  18. ES6 immediately invoked arrow function
  19. Can I use ES6’s arrow function syntax with generators? (arrow notation)
  20. Immediate function using JavaScript ES6 arrow functions
  21. Vue JS: Difference of data() { return {} } vs data:() => ({ })
  22. this is undefined inside arrow function
  23. Binding vs Arrow-function (in JavaScript, or for react onClick)
  24. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  25. Why can I not use `new` with an arrow function in JavaScript/ES6?
  26. Should we use useCallback in every function handler in React Functional Components
  27. How to translate ‘this’ in D3 JavaScript to TypeScript?
  28. How can I differentiate between an arrow function, class and a normal function?
  29. Is it possible to export Arrow functions in ES6/7?
  30. Performance penalty of creating handlers on every render with react-hooks

Leave a Comment