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!
- How to Install Node on Windows, macOS and Linux
- Create an RSS Reader in Node
- How to deploy a .NET app using Docker
- Getting Started with Deno
- How to deploy an Express app using Docker
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting User Location using JavaScript's Geolocation API
- Learn how to build a Slack Bot using Node.js
- Using Push.js to Display Web Browser Notifications
- Getting Started with React
- Setting Up Stylus CSS Preprocessor
- Setting Up a Local Web Server using Node.js