ES6 – Object destructuring

Hi, in this post we are going to see an example of how apply the destructuring. So remember that the destructuring simply implies breaking down a complex structure into simpler parts.

So, let suppose that we have an object (that is passing as a props in react component) and we are console the props object so this object looks like this:

Then if we open the props object will see that this have only 2 properties which is the currentRoll (that is again an object) and the refetch (that is a function)

If I open the property of the props object called currentRoll will see that this property is also an object too and this will have simple properties like id, po_number, and also will have other properties that are type object like printer_roll and type array called roll_components

Note: We can see the __proto__: Object and if you want to know more information about this you can read my post

Ok, let suppose that we want to obtain some information that is inside the printer_roll, so if you see the printer_roll is a type object that have a property called printer that also is an object

And the object printer have a simple property called short_name

Ok, let suppose that I want to use destructuring method to obtain the short_name data, this will be like this with destructuring:

And now in my code I can use the the “short_name” wherever I need it 🙂 and this will have the data “CHI-F”

By Cristina Rojas.

ES6 – Object destructuring