ECMAScript 6 arrow function that returns an object

问题

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 => {foo: \"bar\"}, but have to write p => { return {foo: \"bar\"}; }.

If the arrow function returns anything other than an object, the {} and return are unnecessary, e.g.: p => \"foo\".

p => {foo: \"bar\"} returns undefined.

A modified p => {\"foo\": \"bar\"} throws “SyntaxError: unexpected token: \':\'”.

Is there something obvious I am missing?

回答1:

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

回答2:

You may wonder, why the syntax is valid (but not working as expected):

var func = p => { 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! } 

回答3:

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 => ({ 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

回答4:

the right ways

1. normal return object

 const getUser = user => {return { name: user.name, age: user.age };};  const user = { name: "xgqfrms", age: 21 };  console.log(getUser(user)); //  {name: "xgqfrms", age: 21}  

2. (js expressions )

 const getUser = user => ({ name: user.name, age: user.age });  const user = { name: "xgqfrms", age: 21 };  console.log(getUser(user)); //  {name: "xgqfrms", age: 21}  

explain

The same answer can be found here!

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

回答5:

Issue:

When you do are doing:

p => {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 => ({foo: "bar", attr2: "some value", "attr3": "syntax choices"}) 

But if you want to have multiple statements then you can use the following syntax:

p => {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

回答6:

You can always check this out for more custom solutions:

x => ({}[x.name] = x); 

来源：https://stackoverflow.com/questions/28770415/ecmascript-6-arrow-function-that-returns-an-object