By jkschneider

2015-02-27 17:02:25 8 Comments

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?


@alexpods 2015-02-27 17:10:23

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

@wrschneider 2017-01-18 02:28:56

I'm curious why the parens make a difference.

@alexpods 2017-01-18 13:31:01

@wrschneider because without parens js parser thinks that its a function body, not an object, and foo is a label

@Patrick Roberts 2017-05-20 07:43:01

@wrschneider more specifically, in terms of AST nodes, using parentheses denotes an expression statement, in which an object expression can exist, whereas by default, curly braces are interpreted as a block statement.

@DanMan 2018-10-03 23:52:55

No idea why this works, but if you want to use the value of p as key for the object literal, this is how you do it: p => ({ [p]: 'bar' }). Without the [], it'll either be undefined or literally the letter p.

@4uroraskye 2018-12-12 18:13:30

THANK YOU!!! 🙌 I only just found this out & it will change so many things!

@Uma 2019-01-08 04:54:20

God, that makes total sense. I spend good 30 minutes researching this. Thank you!!! :D

@Petr Odut 2016-06-15 09:40:32

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) {
  "bar"; //obviously no return here!

@Kenmore 2019-02-27 21:51:52

Labels are such a seldom used and esoteric feature. Do they REALLY have any value? I feel like they should be deprecated and eventually removed.

@Paul McBride 2017-08-09 08:48:57

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

@tripleee 2017-08-09 08:50:16

Posting a link to your own blog is problematic. Please read How not to be a spammer.

@Suraj Rao 2017-08-09 08:50:37

Just linking to your own library or tutorial is not a good answer. Linking to it, explaining why it solves the problem, providing code on how to do so and disclaiming that you wrote it makes for a better answer. See: What signifies “Good” self promotion?

@Paul McBride 2017-08-09 08:54:27

Surely I did answer the question in the first sentence though? Having checked the guide on how not to be a spammer, I feel my answer falls within the guidelines.

@Suraj Rao 2017-08-09 08:56:33

You need to have a clear disclaimer that it is your blog.

@Tanner 2017-08-09 08:59:40

and it's worth adding some actual content from the linked post too.

@Paul McBride 2017-08-09 09:00:10

I'll edit now. Thanks!

Related Questions

Sponsored Content

67 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

60 Answered Questions

[SOLVED] How do I correctly clone a JavaScript object?

37 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

41 Answered Questions

[SOLVED] Detecting an undefined object property

33 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

40 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 700291 View
  • 2524 Score
  • 40 Answer
  • Tags:   javascript jquery

45 Answered Questions

43 Answered Questions

[SOLVED] How to check if an object is an array?

37 Answered Questions

[SOLVED] var functionName = function() {} vs function functionName() {}

12 Answered Questions

Sponsored Content