Object Destructuring

Object destructuring is a feature that allows us to extract specific properties from an object and assign them to variables. This can lead to more concise and readable code, especially when working with objects that have multiple properties.

Understanding Object Destructuring

Object destructuring is a way to unpack values from objects into separate variables. Destructuring uses a syntax similar to object literals but on the left-hand side of an assignment.

Here's the basic syntax for object destructuring:

property1, property2, and so on: These are the variable names where the values of the corresponding properties from sourceObject will be assigned. Properties from the object are destructured by the property name, not order. Order doesn't matter at all;
sourceObject: The object from which we want to extract properties.

Object Destructuring in Practice

Let's consider an example where we have an object representing a person's information:


              12345678910
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
  occupation: "Explorer, Cartographer",
};

const { fullName, nationality, occupation } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(occupation); // Output: Explorer, Cartographer

Now, we can use fullName, nationality, and occupation as separate variables with the corresponding values from the person object.

Provide Default Values

We can also provide default values for variables in case the property is not found in the source object:


              123456789
            
const person = {
  fullName: "Amerigo Vespucci",
  nationality: "Italian",
};

const { fullName, nationality, birthDate = "March 9, 1454" } = person;
console.log(fullName); // Output: Amerigo Vespucci
console.log(nationality); // Output: Italian
console.log(birthDate); // Output: March 9, 1454

In this example, the birthDate variable will be assigned the value "March 9, 1454" if the person object doesn't have a birthDate property with a value.

Renaming Variables

Using the : syntax, we can assign the property values to variables with different names. For example:


              1234567891011
            
const weather = {
  city: "Melbourne",
  minTemperature: 65,
  maxTemperature: 78,
};

const { city, minTemperature: min, maxTemperature: max } = weather;

console.log(city); // Output: Melbourne
console.log(min); // Output: 65
console.log(max); // Output: 78

Now, we can use the min and max variables instead of minTemperature and maxTemperature.

Nested Object Destructuring

Destructuring can also be applied to nested objects. For instance, if the object contains objects as properties, we can destructure the nested properties:


              123456789101112131415161718192021
            
const person = {
  name: "Dean Mayert",
  profession: "Neuropsychologist",
  education: {
    degree: "Ph.D. in Neuropsychology",
    university: "Mind Institute",
    graduationYear: 2008,
  },
};

const {
  name,
  profession,
  education: { degree, university, graduationYear },
} = person;

console.log(name); // Output: Dean Mayert
console.log(profession); // Output: Neuropsychologist
console.log(degree); // Output: Ph.D. in Neuropsychology
console.log(university); // Output: Mind Institute
console.log(graduationYear); // Output: 2008

In this example, we can access both the top-level properties like name and profession and the nested properties like degree, university, and graduationYear using destructuring.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 7