Destructuring makes a complex structure look simple by breaking it up into smaller pieces. With destructuring, object and array properties can be accessed easily. Let’s see how destructuring in objects work.
Destructuring came with ES6(ES2015) and is not yet supported by all browsers. To make sure your code works properly it’s best to transpile it — Babel is a good online tool for this.
It’s throwback time!!! Let’s go back to kindergarten. We’ve got five children who are siblings in our class and there’s a school rule to call every student by their full names. But their surname sounds kinda weird and we are miscreants 😉. We just love calling them by their first names.
We are given an object that describes the children. With destructuring we can call them by their first name.
The object, ifebhor (last name) is destructed at line 17. From the code snippet, you’ll see we need to include the property name in the object literal at the left of the assignment operator and it is declared and assigned on one line. Declaration and assignment can be separated.
The parenthesis (…) is added to prevent the compiler from taking the object literal as a block. The statement preceding it must end with a semicolon to prevent it from executing a function in that statement.
If a property name isn’t part of the Object keys it is assigned the value undefined. We can assign it default values in such a scenario. This works just the same as the default values used in function parameters. It’s done using the syntax [original_property_name]= [default_value] in the object literal.
The default values are used if the property name isn’t present.
Changing Property names
The objects property names can be changed using the syntax — [property_name] : [new_name] . Default values can also be assigned using [property_name] : [new_name] = [default_value] .
Mac loves girls so we decided to call him by a different name.
From the code snippet, Mac’s property can now be referenced using playboy.
Nested Object Destructuring
Nested Objects can also be destructured using the basic destructure syntax.
We befriended Damian and found out a little more about him.
It looks very similar to the basic destructuring syntax. However, the nested object names are not assigned a value, only the property names.
Destructuring Objects with Rest
Some unneeded property names are left behind after unpacking the needed ones. These can be bundled up into their own object using the rest parameter.
The other object properties can be accessed as properties of rest.