学ぶ Destructuring Objects for Cleaner Code

メニューを表示するにはスワイプしてください

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