Destructuring Objects In Javascript — ES6

To access object properties in javascript, the dot notation is usually used i.e [object_name].[property_name] . A long object_name would make the dot notation cumbersome.

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.

Basic Destructuring

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.

Default Values

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.

Conclusion

We’ve seen how destructuring objects works. It reduces length of code used in variable assignment and can be used in place of long confusing chains. You should try it in your code to completely understand its full potential. If you learned a thing or two, please do 👏 and leave a comment. Watch out for my next post I’ll be talking about destructuring arrays in Javascript.