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.