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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!