How to use Object Destructuring in JavaScript
Table of Contents
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:
JAVASCRIPTconst website = {
name: "Sabe.io",
url: "https://sabe.io"
};
Now, let's access the name
property of the website
object using the dot notation:
JAVASCRIPTconst website = {
name: "Sabe.io",
url: "https://sabe.io"
};
const name = website.name;
console.log(name);
BASHSabe.io
Here's the same using the bracket notation:
JAVASCRIPTconst website = {
name: "Sabe.io",
url: "https://sabe.io"
};
const name = website["name"];
console.log(name);
BASHSabe.io
Now, let's look at the same example using object destructuring:
JAVASCRIPTconst website = {
name: "Sabe.io",
url: "https://sabe.io"
};
const { name } = website;
console.log(name);
BASHSabe.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:
JAVASCRIPTconst 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:
JAVASCRIPTconst 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);
BASHhttps://twitter.com/sabe_io
Now let's look at the same example using object destructuring:
JAVASCRIPTconst 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);
BASHhttps://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:
JAVASCRIPTconst 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);
BASHhttps://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:
JAVASCRIPTconst website = {
name: "Sabe.io",
url: "https://sabe.io"
};
const { name: websiteName } = website;
console.log(websiteName);
BASHSabe.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:
JAVASCRIPTconst website = {
name: "Sabe.io",
url: "https://sabe.io"
};
const {
name: websiteName,
description = "A website about web development"
} = website;
console.log(websiteName);
console.log(description);
BASHSabe.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!
- Managing PHP Dependencies with Composer
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to Set Up Cron Jobs in Linux
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- How to deploy a Deno app using Docker
- Learn how to use v-model with a custom Vue component
- Using Puppeteer and Jest for End-to-End Testing
- Getting Started with Handlebars.js
- Getting Started with Moment.js
- Creating a Twitter bot with Node.js