What does the arrow function with a () after means? [duplicate]

by

With arrow functions, you can either use a single statement or a block as the function body. These two are equivalent:

() => foo
() => {
  return foo;
}

In your example, if the lambda was defined as () => {post: action.msg} the object ({}) would be interpreted as a body block instead of an object. The runtime would try to parse it as an equivalent to:

function () {
  post: action.msg
}

which is a named label and property access, and doesn’t make much sense here. By wrapping in parens, you hint to the parser that it is an expression to be evaluated and the fat arrow function rules on single-expression bodies kick in, making it equivalent to:

function () {
  return {post: action.msg};
}

To work around the single-expression rules when you want to do two related things (occasionally useful in map/reduce algorithms), you can use parens to group a pair of expressions:

foo.reduce((p, c) => (c.counted = true, p += c.value));

This will set the counted property of c, before adding c.value to p and returning the result of p += c.value as the new value of p.

The parentheses wrap an expression in ECMAScript and can be used, with the comma operator, to group multiple expressions. The results of the last expression are returned when the group is evaluated.

For example:

var i = 0, j = 0;
console.log((j += 10, i += 2), j);

will print 2 10, since j is incremented in the () group and printed later.

More Related Contents:

  1. Unable to access React instance (this) inside event handler [duplicate]
  2. Javascript object literal: what exactly is {a, b, c}?
  3. Call async/await functions in parallel
  4. ES6 Modules: Undefined onclick function after import
  5. How to import jquery using ES6 syntax?
  6. Spread Syntax ES6
  7. ES6 Object Destructuring Default Parameters
  8. Javascript ES6 TypeError: Class constructor Client cannot be invoked without ‘new’
  9. ES6 modules in the browser: Uncaught SyntaxError: Unexpected token import
  10. Why do I need to await an async function when it is not supposedly returning a Promise?
  11. Scope of Default function parameters in javascript
  12. React useState hook event handler using initial state
  13. Is there a downside to using ES6 template literals syntax without a templated expression?
  14. “This” within es6 class method [duplicate]
  15. Syntax error in IE using ES6 arrow functions
  16. Get the class name of ES6 class instance
  17. Using Array objects as key for ES6 Map
  18. Delegated yield (yield star, yield *) in generator functions
  19. SyntaxError: ‘import’ and ‘export’ may appear only with ‘sourceType: module’ – Gulp
  20. Property ‘entries’ does not exist on type ‘ObjectConstructor’
  21. How can I alias a default import in JavaScript?
  22. Unable to use Arrow functions inside React component class [duplicate]
  23. destructuring falsy and null with default parameters
  24. What can we do with ES6 Generator that we cannot with for loop?
  25. Access to Script at ‘ from origin ‘null’ has been blocked by CORS policy
  26. How to namespace es6 classes (for React components)
  27. Re-export default in ES 6 modules
  28. gulp babel, exports is not defined
  29. What is ‘global symbol registry’?
  30. object destructuring: how to use intermediate nested property

Leave a Comment