7-ES6++: Object Destructuring
Tags: javascript, es6, esnext
Published: 2022-11-18 05:40:41

---
title: 7-ES6++: Object Destructuring
published: true
description: 
series: es6++
tags: javascript, es6, esnext
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yfju55nv19x77h0ou6fm.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## 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:

```js
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.

```js
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:

```js
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.

```js
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.

```js
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.

```js

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.

```js
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.

```js
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.

```js
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](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/pb2vmdfhGf) 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](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)