Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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; } 
like image 285
kfcobrien Avatar asked Jan 22 '17 17:01

kfcobrien


People also ask

Can we Destructure an object in the return statement of a function?

You don't need to take the entire object as an argument and pick the required property values. You pass the values directly as function arguments and use them inside. There is one more usage of object destructuring with function. If a function returns an object, you can destructure the values directly into variables.

How do you Destructure an object inside an array?

Destructuring in Arrays. To destructure an array in JavaScript, we use the square brackets [] to store the variable name which will be assigned to the name of the array storing the element. const [var1, var2, ...]

Can we perform Destructuring on nested objects?

Destructuring nested objectsIf we need to access an employee's info we can destructure as many levels as it takes to get to our employee object's properties. const { engineers: { 1: { id, name, occupation, }, }, } = employees; Now we have access to all of the second employee object's properties.

What is Destructure in es6?

Destructuring means to break down a complex structure into simpler parts. With the syntax of destructuring, you can extract smaller fragments from objects and arrays. It can be used for assignments and declaration of a variable.


1 Answers

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}); 
like image 92
Bergi Avatar answered Sep 19 '22 21:09

Bergi