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?

5 comments

@xgqfrms 2019-08-22 04:01:50

the right ways

  1. normal return object

const getUser = user => {return { name: user.name, age: user.age };};

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

  1. (js expressions )

const getUser = user => ({ name: user.name, age: user.age });

const user = { name: "xgqfrms", age: 21 };

console.log(getUser(user));
//  {name: "xgqfrms", age: 21}

explain

image

The same answer can be found here!

https://github.com/lydiahallie/javascript-questions/issues/220

https://mariusschulz.com/blog/returning-object-literals-from-arrow-functions-in-javascript

@SirtusKottus 2019-07-25 12:49:15

You can always check this out for more custom solutions:

x => ({}[x.name] = x);

@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.

@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) {
  foo:
  "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.

@CertainPerformance 2019-06-11 07:29:46

@Kenmore See stackoverflow.com/questions/55934490/… - backwards compatibility. Browsers will refuse to implement a feature which breaks existing sites

@Petr Odut 2019-06-26 14:24:40

@Kenmore you can exit from nested loops if they are labeled. Not often used but definitely useful.

@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

Related Questions

Sponsored Content

40 Answered Questions

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

37 Answered Questions

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

38 Answered Questions

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

69 Answered Questions

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

41 Answered Questions

[SOLVED] Detecting an undefined object property

20 Answered Questions

[SOLVED] Checking if a key exists in a JavaScript object?

  • 2009-07-08 13:21:32
  • Adam Ernst
  • 1737022 View
  • 2655 Score
  • 20 Answer
  • Tags:   javascript object

46 Answered Questions

13 Answered Questions

[SOLVED] event.preventDefault() vs. return false

40 Answered Questions

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

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

44 Answered Questions

[SOLVED] How do I test for an empty JavaScript object?

  • 2009-03-25 01:39:45
  • falmp
  • 1831414 View
  • 2564 Score
  • 44 Answer
  • Tags:   javascript

Sponsored Content