This content originally appeared on DEV Community and was authored by Adriana DiPietro
Object Destructuring
Object destructuring is an approach to access an object's properties. We use object destructuring because it dries our code by removing duplication. There are many reasons to use object destructuring. Today, let's talk about a few.
Property Assignment
It is most commonly seen as a way to assign a property to a variable. Traditionally, you may see property assignment like such:
person = {
title: 'Software Engineer',
name: '',
age: ''
}
const title = person.title
In the above example, we declare an object called "person" with a few properties. We then declare a constant variable named "title" and set it to the "title" property of the object "person". We may participate in this type of variable assignment so as to use the title property often in an application.
With object destructuring, we can create a simpler, more succinct version. Here is an example:
person = {
title: 'Software Engineer',
name: '',
age: ''
}
const { title } = person
Similarly, we declare an object "person" and a constant named "title". However, in our assignment, we assign the constant simply to the object "person".
By wrapping our constant in brackets, we are telling our code to look to the object for a property with the same name as the constant we declare.
In a simple example seen above, it may seem redundant or even silly to use object destructuring. However, as objects grow alongside applications, complexity ensues and the need for succinct, dry code also grows.
Multiple Property Assignment
Here is how we can use object destructuring to assign multiple properties at a single moment in our code:
person = {
title: 'Software Engineer',
name: '',
age: ''
}
const { title, name, age } = person
And here is the "traditional", equivalent version:
person = {
title: 'Software Engineer',
name: '',
age: ''
}
const title = person.title
const name = person.name
const age = person.age
We removed quite a bit of code with object destructuring!
How else can we use it?
Aliases
We can use object destructuring to alias property names incase we do not want to use the original property name.
person = {
title: 'Software Engineer',
name: '',
age: ''
}
const { title: jobTitle } = person
In the above example, we are still accessing "person.title", but we gave it a new identifier: "jobTitle". If we were to console "jobTitle", our return value would be "Software Engineer"! Cool, right?
Properties in Nested Objects
In our previous example, our JavaScript object only portrayed properties with simple data types (i.e strings). While we love simplicity, JavaScript objects tend to be complex. A JavaScript object may have a property that is an array or an object itself. Here is an example:
person = {
title: 'Software Engineer',
name: '',
age: '',
previousJob: {
title: 'SEO Specialist',
location: 'NYC'
}
}
The "person" object has a property called "previousJob" and "previousJob" has two (2) properties, "title" and "location". This is nesting: we have an object inside another object.
To access a property of a nested object, we can of course use object destructuring. Here's how:
person = {
title: 'Software Engineer',
name: '',
age: '',
previousJob: {
title: 'SEO Specialist',
location: 'NYC'
}
}
const { previousJob: { location } } = person
If we ask our console, what "location" is, we will receive a return value of "NYC".
Recap
- Object destructuring dries our code.
- Object destructuring assigns an object property to a variable.
- Object destructuring binds the property's value to a variable.
- Object destructuring is useful in complex applications.
Thank you for reading!
? Comment below to continue the discussion. I would love to learn from you! ?
This content originally appeared on DEV Community and was authored by Adriana DiPietro
Adriana DiPietro | Sciencx (2021-08-06T00:28:07+00:00) A Guide to Object Destructuring in JavaScript. Retrieved from https://www.scien.cx/2021/08/06/a-guide-to-object-destructuring-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.