Object Destructuring in ES6

What is object destructuring? Object destructuring is used to extract the property values of an object and assign them to variables.

Similar to Array destructure, object destructure shares a similar syntax. You just have to replace the square bracket with the curly bracket. (If you haven’t read my previous blog on array destructure, I’d recommend you to read that first). Here, I’ll cover most of the things that you need to know about object destructuring.

You might already know that to access any property value of an object, the basic syntax is:

objectname.propertyname

Extracting property values of an object before destructure:

Now this way is going to get extremely annoying when you’ll have to access the values multiple times or when you will be dealing with nested objects.

NOTE:

person is the object name

Name and hobby are the property names

“Sarah” and “Code” are the respective property values

Extracting property values of an object after destructure:

While destructuring, we have assigned the properties(name and hobby) to the declared object(person). In this way, you can access the values only with the property name! Doesn’t it make the code more simple?

DESTRUCTURING WHEN DEALING WITH FUNCTIONS:

In the above example, I am passing the entire object(person) as a parameter to the function logDetails. Inside the function, I am accessing the values just like we do without using destructure. If I wish to make my code simpler, I can destructure inside the function. But wait… ES6 has a more short and efficient way of doing it

Why not directly destructure inside the function parenthesis?

Inside the parenthesis, where we provide the function parameters, we can add curly braces and write the property names we wish to use inside the function.

While calling the function, when you pass the object, ES6 will locate the properties present in that object and produce the required values.

NESTED OBJECTS:

Nested objects tend to get very confusing when dealing with applications. Destructuring proves to be a great help!

Extracting property values of a nested object before destructuring:

As you can see, score is an object inside of an object person. That is what nested objects are. We see that person.score is constantly being repeated.

Constant repetition makes this heavily clustered and totally not readable.

Extracting property values of a nested object after destructuring:

On the left hand side, we declare the properties to be accessed (enclosed in curly braces)and on the right hand side, we write the object it is in (In this case, person.score).

USING NESTED OBJECTS IN FUNCTIONS:

Dealing with nested objects in a function is very similar to dealing with normal objects. We use curly braces inside the function parenthesis and declare the properties we want to access. While calling the function, we pass the object where the properties are located in.

NOTE: maths, english and computerScience are NOT declared directly inside person. Rather, they are declared inside score object which is inside person.