Object Destruction
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 destruction.
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 destruction 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 destruction 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 destruction with function parameters
As we saw in previous article, we can use default values for function parameters. We can also use object destruction 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 destruction to get the values of name, age, and city properties from the object and use them as function parameters.
Object Destruction with default values
We can also use object destruction 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 Destruction with rest operator
We can also use object destruction 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 Destruction with nested objects
We can also use object destruction 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 destruction to get the values of those properties and store them in variables with the same names.
Object Destruction with nested objects and default values
We can also use object destruction 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 Destruction 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 destruction, we used default values, rest operator, and nested objects.
We got the name as normal object destruction, we got the age and renamed it to myAge, we got the street as nested object destruction, 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 destruction 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)
