DEV Community

Cover image for A Guide to Object Destructuring in JavaScript
Adriana DiPietro
Adriana DiPietro

Posted on

A Guide to Object Destructuring in JavaScript

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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'
    }
}

Enter fullscreen mode Exit fullscreen mode

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 

Enter fullscreen mode Exit fullscreen mode

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! 🌻

Discussion (13)

Collapse
jivkojelev91 profile image
JivkoJelev91

For nested objects i still prefer the first way:

const { location } = person.previousJob;
Enter fullscreen mode Exit fullscreen mode
Collapse
imiahazel profile image
Imia Hazel

Thanks for the guide.

Collapse
am20dipi profile image
Adriana DiPietro Author

Thank you for reading along!

Collapse
ali_hassan_313 profile image
Ali Hassan

Great

Collapse
am20dipi profile image
Adriana DiPietro Author

Thanks for the comment!

Collapse
femiobadimu profile image
Femi Obadimu

Nice Article
You really spliced it....
Anyone could read and understand this...

Collapse
am20dipi profile image
Adriana DiPietro Author

Thanks Femi!

Collapse
keyurparalkar profile image
Keyur Paralkar

The nested object destructing was preety neat. Thanks

Collapse
am20dipi profile image
Adriana DiPietro Author

Thanks for the reply!

Collapse
alvinpeter9 profile image
alvinpeter9

Nice read. I was thinking about this a while ago and voilà!, your post came up and I now understand it better.

Collapse
am20dipi profile image
Adriana DiPietro Author

I am glad I could help. Thanks for the reply :)

Collapse
lucianoricardo737 profile image
Luciano

I like the last. Ty.

Collapse
am20dipi profile image
Adriana DiPietro Author

Thank you for the feedback!