Over the past couple months I've been working on an automation project. In the course of this project I ended up with some gigantic nested objects brimming with CSS selectors that I access in the automation scripts. Before ES6, accessing the values stored in objects, arrays, etc.. was verbose and repetitive. Now we can use destructuring to assign an object's values to variables in a more concise manner.
Below is an example of assigning some object's properties to variables without the use of destructuring.
We have a property name firstName and we've created a variable firstName then we've assigned to that variable the contents of the property with student.firstname. Same thing has happened with lastName. It's repetitive and wordy. Of course, it makes sense to name variables with the same name as the properties whose values you are assigning but with destructuring you can do it all at once.
What this means is, create a variable called firstName, find the property called firstName in the student object and assign it to the variable. The same is true with lastName.
This is just as easily done with a nested object
Lets say we want to yank out the social info from the student object.
Destructuring applies to much more than what I've illustrated here. So go on and check it out.