ES6 destructuring within a return statement

Question

Is it possible to destructure an object while returning it at the same time. For example, to change this code:

const mapStateToProps = ({ newItem }) =>{
  const { id, name, price } = newItem;
  return { id, name, price };
}

To something like this:

const mapStateToProps = ({ newItem }) =>{
  return { id, name, price } = newItem;
}

Have you tried it? Seems like that would have taken less time than typing in the question here. — Pointy, Jan 22 '17 at 17:39
Thanks for your helpful reply Pointy, and yes of course I have tried it but with so much syntactic sugar in ES6, I thought there may be a correct way of doing it — kfcobrien, Jan 22 '17 at 17:42
Your code works already, not sure what "correct way of doing it" you want. — Oriol, Jan 22 '17 at 17:44
@kfcobrien well if you tried it, what happened? That sort of information helps people understand more about your question and the specifics of what you're attempting to do. — Pointy, Jan 22 '17 at 17:47
@Oriol No, it really doesn't. It does assign global variables and returns the object from the argument. — Bergi, Jan 22 '17 at 17:57
OK, the codes are not equivalent, but the second one destructures an object and returns it, like asked in the description. — Oriol, Jan 22 '17 at 18:01

score 25 · Accepted Answer · edited May 23 '17 at 12:01

25

No, it's not possible.

(Disclaimer: your syntax works and does both destructuring and returning, but it is equivalent to

({ id, name, price } = newItem); // assigns global variables
return newItem;

which is probably not what you wanted)

To do what you want (which I assume is creating a new object), you need to use an object literal (potentially with shorthand property notation). See also One-liner to take some properties from object in ES 6:

const mapStateToProps = ({newItem: {id, name, price}}) => ({id, name, price});

edited May 23 '17 at 12:01

Community

answered Jan 22 '17 at 18:01

Bergi

1

thank you, this is exactly what I was looking for!! Sorry I was not clearer in my description :) – kfcobrien Jan 22 '17 at 18:04
1

Nice. So for example, I want to assign a copy of `newItem` and pick only some of the props, I can do it in one line: `const newItemCopy = (({name, price}) => ({name, price}))(newItem)` – Yahya Nov 12 '19 at 07:37
in case someone needs good instructions on destructuring please go here : [link](https://dmitripavlutin.com/javascript-object-destructuring/) – imshashi17 Oct 21 '20 at 14:13

score 2 · Answer 2 · answered Feb 27 '18 at 00:13

2

In ES6 you can also do the following, if you want to pass all the newItem keys

const mapStateToProps = ({ newItem }) => ({ ...newItem });

answered Feb 27 '18 at 00:13

mhlavacka

1

This works when all properties should be returned. But when specific properties needs to be returned, the first approach suits better. – Andrey Luiz Aug 22 '18 at 13:12
6

That's exactly the same as just returning `newItem` if I'm not mistaken... – qjnr Dec 15 '18 at 17:49

2 Answers2