DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for 7-ES6++: Object Destructuring
Hasan Zohdy
Hasan Zohdy

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

To define a different variable name, we use the following syntax:

const { property: variableName } = object;
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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" }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (6)

Collapse
 
daxtersky profile image
Miko

This part console.log(country); // Egypt is wrong, country is not undefined so should be Cairo

Collapse
 
hassanzohdy profile image
Hasan Zohdy

Actually i'm destructing the object with country = 'Egypt' which means if the country is not in the object, then it will use Egypt as default value.

Collapse
 
daxtersky profile image
Miko

Ahh right, I confused city with country πŸ‘

Thread Thread
 
hassanzohdy profile image
Hasan Zohdy

No problem buddy, glad to see your comment though

Collapse
 
mellen profile image
Matt Ellen

Just a small criticism: It's called destructuring not destruction.

Collapse
 
hassanzohdy profile image
Hasan Zohdy

Uip, you're right, updated it.

Thanks for the tip

πŸ‘‹ Hey, my name is Noah and I’m the one who set up this ad. My job is to get you to join DEV, so if you fancy doing me a favor, I’d love for you to create an account.

If you found DEV from searching around, here are a couple of our most popular articles on DEV: