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

Answer 1

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

Answer 2

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