Object Destructuring
Working with objects is essential
in JavaScript. We use objects to store data, to pass data to functions, to return data from functions, and so on. In ES6 we have a new way to work with objects, which is called object destructuring
.
Let's see an example:
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
};
const { name, age, city } = person;
console.log(name); // Hasan
Here we defined an object called person
, that object contains three properties, name
, age
, and city
. Then we used object destructuring
to get the values of those properties and store them in variables with the same names.
Using different variable names
We can also use object destructuring
to get the values of properties and store them in variables with different names.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
};
const { name: personName, age: personAge, city: personCity } = person;
console.log(personName); // Hasan
To define a different variable name, we use the following syntax:
const { property: variableName } = object;
Now we can use variableName
to get the value of property
from object
.
Using object destructuring with function parameters
As we saw in previous article, we can use default
values for function parameters. We can also use object destructuring
to get the values of properties from an object and use them as function parameters.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
};
function printPersonInfo({ name, age, city }) {
console.log(`Name: ${name}, Age: ${age}, City: ${city}`);
}
printPersonInfo(person); // Name: Hasan, Age: 30, City: Cairo
Here we defined a function called printPersonInfo
, that function takes an object as a parameter. Then we used object destructuring
to get the values of name
, age
, and city
properties from the object and use them as function parameters.
Object Destructuring with default values
We can also use object destructuring
with default
values, this can be useful if the property that we're trying to destruct is undefined
or not defined in the object.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
};
const { name, age, city, country = "Egypt" } = person;
console.log(country); // Egypt
Here we defined a constant called country
, that constant is trying to get the value of country
property from person
object, but unfortunately country
property is not defined in person
object. So, the value of country
will be undefined
. Then we set the default value of country
to Egypt
, so if the value of country
is undefined
, the value of country
will be Egypt
.
Object Destructuring with rest operator
We can also use object destructuring
with rest
operator, this can be useful if we want to get the rest of the properties from an object.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
country: "Egypt",
};
const { name, ...rest } = person;
console.log(rest); // { age: 30, city: "Cairo", country: "Egypt" }
The rest operator can work here as well like function parameters, it will get the rest of the properties from the object and store them in a new object.
Object Destructuring with nested objects
We can also use object destructuring
with nested objects.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
country: "Egypt",
address: {
street: "El-Maadi",
building: 10,
},
};
const { name, age, address: { street, building } } = person;
console.log(street); // El-Maadi
Here we defined an object called address
, that object contains two properties, street
and building
. Then we used object destructuring
to get the values of those properties and store them in variables with the same names.
Object Destructuring with nested objects and default values
We can also use object destructuring
with nested objects and default
values.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
country: "Egypt",
address: {
street: "El-Maadi",
building: 10,
},
};
const { name, age, address: { street, building, floor = 1 } } = person;
console.log(floor); // 1
Here we defined a constant called floor
, that constant is trying to get the value of floor
property from address
object, but unfortunately floor
property is not defined in address
object. So, the value of floor
will be undefined
. Then we set the default value of floor
to 1
, so if the value of floor
is undefined
, the value of floor
will be 1
.
Object Destructuring with nested objects and rest operator and default value
Let's mix all of the above together.
const person = {
name: "Hasan",
age: 30,
city: "Cairo",
address: {
street: "El-Maadi",
building: 10,
},
};
const { name, age: myAge, address: { street, ...rest }, country = "Egypt" } = person;
console.log(name); // Hasan
console.log(rest); // { building: 10 }
console.log(country); // Egypt
console.log(myAge); // 30
Here we used all available features of object destructuring
, we used default
values, rest
operator, and nested objects.
We got the name
as normal object destructuring, we got the age
and renamed it to myAge
, we got the street
as nested
object destructuring, we got the rest
of the properties from address
object and stored them in a new object called rest
, and we got the country
and set the default value to Egypt
as the country
property is not defined in the person
object.
🎨 Conclusion
In this article, we learned about object destructuring
in JavaScript, we learned how to use it, and we learned how to use it with default
values, rest
operator, renaming variables, and nested objects.
☕♨️ Buy me a Coffee ♨️☕
If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.
😍 Join our community
Join our community on Discord to get help and support (Node Js 2023 Channel).
📚 Bonus Content 📚
You may have a look at these articles, it will definitely boost your knowledge and productivity.
General Topics
- Event Driven Architecture: A Practical Guide in Javascript
- Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
- After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
Packages & Libraries
- Collections: Your ultimate Javascript Arrays Manager
- Supportive Is: an elegant utility to check types of values in JavaScript
- Localization: An agnostic i18n package to manage localization in your project
React Js Packages
Courses (Articles)
Top comments (6)
This part
console.log(country); // Egypt
is wrong, country is not undefined so should be CairoActually i'm destructing the object with
country = 'Egypt'
which means if thecountry
is not in the object, then it will useEgypt
as default value.Ahh right, I confused
city
withcountry
👍No problem buddy, glad to see your comment though
Just a small criticism: It's called destructuring not destruction.
Uip, you're right, updated it.
Thanks for the tip