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

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