ECMAScript 6 arrow function that returns an object

Question

When returning an object from an arrow function  it seems that it is necessary to use an extra set of    and a return keyword because of an ambiguity in the grammar   That means I can   t write p   gt   foo   bar    but have to write p   gt    return  foo   bar        If the arrow function returns anything other than an object  the    and return are unnecessary  e g   p   gt   foo    p   gt   foo   bar   returns undefined   A modified p   gt    foo    bar   throws    SyntaxError  unexpected token           Is there something obvious I am missing

User · Accepted Answer

You must wrap the returning object literal into parentheses. Otherwise curly braces will be considered to denote the function’s body. The following works:

p => ({ foo: 'bar' });

You don't need to wrap any other expression into parentheses:

p => 10;
p => 'foo';
p => true;
p => [1,2,3];
p => null;
p => /^foo$/;

and so on.

Reference: MDN - Returning object literals

User · Answer

ES6 Arrow Function returns an Object  the right ways   normal function return an object   const getUser   user   gt   return   name  user name  age  user age       const user     name   quot xgqfrms quot   age  21     console log getUser user         name   quot xgqfrms quot   age  21      js expressions     const getUser   user   gt     name  user name  age  user age      const user     name   quot xgqfrms quot   age  21     console log getUser user         name   quot xgqfrms quot   age  21    explain  refs https   github com lydiahallie javascript-questions issues 220 https   mariusschulz com blog returning-object-literals-from-arrow-functions-in-javascript

User · Answer

Issue   When you do are doing   p   gt   foo   bar     JavaScript interpreter thinks you are opening a multi-statement code block  and in that block  you have to explicitly mention a return statement   Solution   If your arrow function expression has a single statement  then you can use the following syntax   p   gt    foo   bar   attr2   some value    attr3    syntax choices      But if you want to have multiple statements then you can use the following syntax   p   gt   return  foo   bar   attr2   some value    attr3    syntax choices      In above example  first set of curly braces opens a multi-statement code block  and the second set of curly braces is for dynamic objects  In multi-statement code block of arrow function  you have to explicitly use return statements  For more details  check Mozilla Docs for JS Arrow Function Expressions

User · Answer

You can always check this out for more custom solutions   x   gt      x name    x

User · Answer

You may wonder  why the syntax is valid  but not working as expected    var func   p   gt    foo   bar      It s because of JavaScript s label syntax   So if you transpile the above code to ES5  it should look like   var func   function  p      foo     bar     obviously no return here

User · Answer

If the body of the arrow function is wrapped in curly braces  it is not implicitly returned  Wrap the object in parentheses  It would look something like this   p   gt     foo   bar       By wrapping the body in parens  the function will return   foo   bar     Hopefully  that solves your problem  If not  I recently wrote an article about Arrow functions which covers it in more detail  I hope you find it useful  Javascript Arrow Functions

[javascript] ECMAScript 6 arrow function that returns an object

Examples related to javascript

Examples related to ecmascript-6

Examples related to arrow-functions