How to use Object Destructuring in JavaScript

In JavaScript, pretty much everything is an object, meaning they contain key-value properties.

There are many ways you can access a property of an object, including the dot notation and bracket notation.

However, there is another way to access properties of an object, and that is through object destructuring.

In this post, we'll learn what object destructuring is, and examples of how to do it in JavaScript.

How to use object destructuring

To learn how to use object destructuring, let's first look at an example object:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io"
};

Now, let's access the name property of the website object using the dot notation:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io"
};

const name = website.name;

console.log(name);

BASH
Sabe.io

Here's the same using the bracket notation:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io"
};

const name = website["name"];

console.log(name);

BASH
Sabe.io

Now, let's look at the same example using object destructuring:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io"
};

const { name } = website;

console.log(name);

BASH
Sabe.io

How to use object destructuring with nested object properties

The nice thing about object destructuring is that you can use it to access nested object properties.

Let's create a nested object:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io",
    social: {
        twitter: "https://twitter.com/sabe_io",
        facebook: "https://facebook.com/sabe.io"
    }
};

Here's how we can access the twitter property using the dot notation:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io",
    social: {
        twitter: "https://twitter.com/sabe_io",
        facebook: "https://facebook.com/sabe.io"
    }
};

const twitter = website.social.twitter;

console.log(twitter);

BASH
https://twitter.com/sabe_io

Now let's look at the same example using object destructuring:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io",
    social: {
        twitter: "https://twitter.com/sabe_io",
        facebook: "https://facebook.com/sabe.io"
    }
};

const { 
    social: { 
        twitter 
    } 
} = website;

console.log(twitter);

BASH
https://twitter.com/sabe_io

As you can see, you can essentially replicate the structure of the object using object destructuring to get the nested property.

You can even grab both twitter and the entire social object at the same time:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io",
    social: {
        twitter: "https://twitter.com/sabe_io",
        facebook: "https://facebook.com/sabe.io"
    }
};

const { 
    social: { 
        twitter 
    },
    social
} = website;

console.log(twitter);
console.log(social);

BASH
https://twitter.com/sabe_io
{twitter: "https://twitter.com/sabe_io", facebook: "https://facebook.com/sabe.io"}

How to use object destructuring and rename properties

You can also use object destructuring to rename properties.

Let's look at an example:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io"
};

const { name: websiteName } = website;

console.log(websiteName);

BASH
Sabe.io

Simply add a colon after the property name, and then the new name you want to use.

How to use object destructuring with default values

A very powerful feature of object destructuring is that you can set default values.

This means that if the object doesn't have a property, you can still access it, and it will return the default value.

Let's look at an example:

JAVASCRIPT
const website = {
    name: "Sabe.io",
    url: "https://sabe.io"
};

const { 
    name: websiteName,
    description = "A website about web development"
} = website;

console.log(websiteName);
console.log(description);

BASH
Sabe.io
A website about web development

Notice how the description property doesn't exist in the website object, but we can still access it, and it returns the default value.

Conclusion

In this post, we learned what object destructuring is, and how to use it in JavaScript.

We also learned how to use object destructuring with nested object properties, rename properties, and set default values.

Thanks for reading!

• Support Us
• Discord
• Share
• Post
• Share