ECMAScript 6 arrow function that returns an object ECMAScript 6 arrow function that returns an object javascript javascript

ECMAScript 6 arrow function that returns an object


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