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 }) =>{
          


        

Answer 1

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

Answer 2

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

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