Learn Destructuring Objects for Cleaner Code | Advanced Object Manipulation Techniques

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:

const { property1, property2, ...} = sourceObject;

property1, property2: variable names that will hold the values from the object;
sourceObject: the object you're extracting properties from;
Order does not matter: properties are matched by name.

Object Destructuring in Practice


              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 fullName, nationality, and occupation are standalone variables holding their respective values.

Provide Default Values

If the object does not contain a property, you can assign a default value:


              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

If birthDate is missing, the default value is used.

Renaming Variables

You can rename extracted variables using the : syntax.


              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

This is useful when shorter names improve readability or when avoiding naming conflicts.

Nested Object Destructuring

You can also destructure properties inside nested objects.


              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

You can extract both top-level and deeply nested values in one clean expression.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 7

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how object destructuring works with arrays?

What happens if a property is missing and no default value is provided?

Can you show more examples of nested destructuring?

Swipe to show menu

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:

const { property1, property2, ...} = sourceObject;

property1, property2: variable names that will hold the values from the object;
sourceObject: the object you're extracting properties from;
Order does not matter: properties are matched by name.

Object Destructuring in Practice


              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 fullName, nationality, and occupation are standalone variables holding their respective values.

Provide Default Values

If the object does not contain a property, you can assign a default value:


              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

If birthDate is missing, the default value is used.

Renaming Variables

You can rename extracted variables using the : syntax.


              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

This is useful when shorter names improve readability or when avoiding naming conflicts.

Nested Object Destructuring

You can also destructure properties inside nested objects.


              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

You can extract both top-level and deeply nested values in one clean expression.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 7

Destructuring Objects for Cleaner Code

Understanding Object Destructuring

Object Destructuring in Practice

Provide Default Values

Renaming Variables

Nested Object Destructuring

1. What does the following code do?

2. How can we provide default values for variables in object destructuring?

3. In object destructuring, how can we rename variables during assignment?

Destructuring Objects for Cleaner Code

Understanding Object Destructuring

Object Destructuring in Practice

Provide Default Values

Renaming Variables

Nested Object Destructuring

1. What does the following code do?

2. How can we provide default values for variables in object destructuring?

3. In object destructuring, how can we rename variables during assignment?