Déstructuration d'Objet

La déstructuration d'objet est une fonctionnalité qui nous permet d'extraire des propriétés spécifiques d'un objet et de les assigner à des variables. Cela peut conduire à un code plus concis et lisible, surtout lorsque l'on travaille avec des objets ayant plusieurs propriétés.

Comprendre la Déstructuration d'Objet

La déstructuration d'objet est une manière de déballer des valeurs d'objets dans des variables séparées. La déstructuration utilise une syntaxe similaire aux littéraux d'objet mais du côté gauche d'une affectation.

Voici la syntaxe de base pour la déstructuration d'objet :

property1, property2, etc. : Ce sont les noms de variables où les valeurs des propriétés correspondantes de sourceObject seront assignées. Les propriétés de l'objet sont déstructurées par le nom de la propriété, pas par l'ordre. L'ordre n'a pas d'importance du tout ;
sourceObject : L'objet à partir duquel nous voulons extraire des propriétés.

Déstructuration d'Objet en Pratique

Considérons un exemple où nous avons un objet représentant les informations d'une personne :


              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

Maintenant, nous pouvons utiliser fullName, nationality, et occupation comme des variables séparées avec les valeurs correspondantes de l'objet person.

Fournir des valeurs par défaut

Nous pouvons également fournir des valeurs par défaut pour les variables au cas où la propriété ne serait pas trouvée dans l'objet source :


              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

Dans cet exemple, la variable birthDate se verra attribuer la valeur "March 9, 1454" si l'objet person n'a pas de propriété birthDate avec une valeur.

Renommer les Variables

En utilisant la syntaxe :, nous pouvons attribuer les valeurs des propriétés à des variables avec des noms différents. Par exemple :


              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

Maintenant, nous pouvons utiliser les variables min et max au lieu de minTemperature et maxTemperature.

Déstructuration d'Objets Imbriqués

La déstructuration peut également être appliquée aux objets imbriqués. Par exemple, si l'objet contient des objets en tant que propriétés, nous pouvons déstructurer les propriétés imbriquées :


              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

Dans cet exemple, nous pouvons accéder à la fois aux propriétés de niveau supérieur comme name et profession et aux propriétés imbriquées comme degree, university, et graduationYear en utilisant la déstructuration.

Tout était clair ?

Merci pour vos commentaires !

Section 3. Chapitre 7

Structures de Données JavaScript

Déstructuration d'Objet

Comprendre la Déstructuration d'Objet

Déstructuration d'Objet en Pratique

Fournir des valeurs par défaut

Renommer les Variables

Déstructuration d'Objets Imbriqués

1. Que fait le code suivant ?

2. Comment pouvons-nous fournir des valeurs par défaut pour les variables dans la déstructuration d'objet ?

3. Dans la déstructuration d'objet, comment pouvons-nous renommer des variables lors de l'assignation ?