CODEWITHSUNDEEP
javascriptecmascript-6destructuring
kfcobrien
kfcobrien

Reputation: 541

ES6 destructuring within a return statement

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

Upvotes: 46

Views: 30374

Answers (4)

jiv-e
jiv-e

Reputation: 513

I would recommend another approach to achieve the same result.

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

Or shorter:

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

Or even shorter:

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

Here are some reasons why this would be better:

Upvotes: 0

ludo
ludo

Reputation: 374

There is a way to do what you want without this repetition.

But this require the usage of forbidden js feature; and this isn't destructuring anymore.

So I would not recommend it at all.

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

Upvotes: 2

mhlavacka
mhlavacka

Reputation: 701

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

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

Upvotes: 3

Bergi
Bergi

Reputation: 664297

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});

Upvotes: 37

Related Questions