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?
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
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!
}
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