What is the exact parsing precedence of arrow function (fat arrow =>) in Javascript?

by

As you say, => is not an operator. Arrow functions are primary syntax.

The rules for them are defined in the specification, starting with the ArrowFunction production. ArrowFunction is defined as ArrowParameters followed by => followed by the misleadingly-named ConciseBody. ConciseBody has two forms. You’re asking about the form using ExpressionBody, which is where the first non-whitespace token after => isn’t {. If there were an opening curly brace there it would denote the opening of a block called a FunctionBody instead.

The ExpressionBody definition is quite simple: it’s an AssignmentExpression.

Which takes us into very familiar territory, because AssignmentExpression is the syntax for the right-hand side of an assignment (or variable initializer), entries in an array initializer, the value part of a property initializer, an argument to a function, etc. So whatever follows the => in a concise body has the same parsing rules as what we put where AssignmentExpression is below:

x = AssignmentExpression;
y = AssignmentExpression, z = AssignmentExpression;
a1 = [AssignmentExpression];
a2 = [AssignmentExpression, AssignmentExpression];
o1 = {foo: AssignmentExpression};
o2 = {foo: AssignmentExpression, bar: AssignmentExpression};
doSomething(AssignmentExpression);
doSomething(AssignmentExpression, AssignmentExpression);

Just for detail, an AssignmentExpression is any of:

(You may wonder, as I did, how the y in x = y can match AssignmentExpression given the definition of it above, since y is clearly an Identifier and none of those looks like it will lead to the Identifier production. This is where specs can be really hard to read. It turns out that you get there if you keep going long enough. The path is (deep breath): AssignmentExpression →
ConditionalExpression →
LogicalORExpression →
LogicalANDExpression →
BitwiseORExpression →
BitwiseXORExpression →
BitwiseANDExpression →
EqualityExpression →
RelationalExpression →
ShiftExpression →
AdditiveExpression →
MultiplicativeExpression →
ExponentiationExpression →
UnaryExpression →
UpdateExpression →
LeftHandSideExpression →
NewExpression →
MemberExpression →
PrimaryExpression →
IdentifierReference →
Identifier — whew! [mops brow]. Thank you Oriol!)

More Related Contents:

  1. When should I use a return statement in ES6 arrow functions
  2. ECMAScript 6 arrow function that returns an object
  3. One-liner to take some properties from object in ES 6
  4. “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6
  5. Using Node.js require vs. ES6 import/export
  6. Convert a string to a template string
  7. ES6 destructuring function parameter – naming root object
  8. What is the motivation for bringing Symbols to ES6?
  9. What is “function*” in JavaScript?
  10. Create object from array
  11. How to generate range of numbers from 0 to n in ES2015 only?
  12. ES6 array map doesn’t return anything: ReactJS
  13. Why React Hook useState uses const and not let
  14. Is Number.IsNaN() more broken than isNaN()
  15. Is there a way to tell if an ES6 promise is fulfilled/rejected/resolved? [duplicate]
  16. Template literals syntax is not working in IE11
  17. ‘Access-Control-Allow-Credentials’ header in the response is ” which must be ‘true’
  18. What happens if you don’t resolve or reject a promise?
  19. TypeScript ES6 import module “File is not a module error”
  20. Check if a constructor inherits another in ES6
  21. Are JavaScript forever-pending promises bad?
  22. Node JS / V8 destructuring bug?
  23. Why does .then() chained to Promise.resolve() allow const declaration to be reassigned?
  24. Is it possible to export Arrow functions in ES6/7?
  25. Javascript – Template Strings Don’t Pretty Print Objects
  26. How can the current number of i be accessed in a for of loop?
  27. How to bind methods when destructuring an object in JavaScript?
  28. Return object with default values from an array in JavaScript
  29. Deep nested array of objects not rendering
  30. ES6 module syntax: is it possible to `export * as Name from …`?

Leave a Comment