7-ES6++: Object Destructuring

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

• useFetcher: easiest way to fetch data in React Js

Courses (Articles)

• Node Js 2023 Course: Node With Typescript, The Ultimate Guide
• React Js: Let"s Create File Manager With React Js and Node Js