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:

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

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

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

const name = website.name;

console.log(name);

	Sabe.io

Here's the same using the bracket notation:

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

const name = website["name"];

console.log(name);

	Sabe.io

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

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

const { name } = website;

console.log(name);

	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:

	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:

	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);

	https://twitter.com/sabe_io

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

	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);

	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:

	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);

	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:

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

const { name: websiteName } = website;

console.log(websiteName);

	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:

	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);

	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
• Join
• Share
• Tweet
• Share