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?
This question is related to
javascript
ecmascript-6
arrow-functions
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
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!
}
the right ways
const getUser = user => {return { name: user.name, age: user.age };};
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
const getUser = user => ({ name: user.name, age: user.age });
const user = { name: "xgqfrms", age: 21 };
console.log(getUser(user));
// {name: "xgqfrms", age: 21}
https://github.com/lydiahallie/javascript-questions/issues/220
https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript
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.
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
You can always check this out for more custom solutions:
x => ({}[x.name] = x);
Source: Stackoverflow.com