L'opérateur de propagation, noté ..., est un outil utile pour créer de nouveaux objets en fusionnant et en copiant les propriétés d'objets existants. Avec l'opérateur de propagation, il est possible d'effectuer les opérations suivantes :

• Clonage d'objets ;
• Ajout ou modification de propriétés ;
• Création de nouveaux objets.

Examinons comment utiliser l'opérateur de propagation avec les objets.

Opérateur de propagation

L'opérateur de propagation (...) peut être utilisé dans divers contextes, mais l'un de ses usages les plus courants consiste à créer de nouveaux objets en étalant les propriétés d'objets existants.

Voici la syntaxe de base de l'opérateur de propagation utilisé pour la création d'objets :

const newObject = { ...sourceObject }; 

• newObject : Le nouvel objet à créer ;
• sourceObject : L'objet source dont on souhaite copier les propriétés.

Clonage d’un objet

Examinons comment cloner un objet. Nous allons créer un nouvel objet avec les mêmes propriétés et valeurs que l’objet source. Toute modification apportée au nouvel objet n’affecte pas l’objet d’origine.

const originalObject = {
  name: "Diamond Kite",
  color: "purple",
};

// Create a cloned object by spreading the original object
const clonedObject = { ...originalObject }; // Cloning with the help of the spread operator

// Add a new property to the cloned object
clonedObject.size = "large"; // Adding a new property to the cloned object

console.log(originalObject); // Output: {name: 'Diamond Kite', color: 'purple'}
console.log(clonedObject); // Output: {name: 'Diamond Kite', color: 'purple', size: 'large'}

Dans cet exemple, clonedObject est un nouvel objet qui est un clone de originalObject. Toute modification apportée à clonedObject n’affectera pas originalObject. Ainsi, clonedObject possède trois propriétés tandis que originalObject n’en possède que deux.

Ajout ou modification de propriétés

L’opérateur de propagation est également utile pour ajouter ou modifier des propriétés dans un nouvel objet. Il est possible d’inclure des propriétés supplémentaires ou d’écraser celles existantes dans le nouvel objet.

const waterBottle = {
  brand: "HydroFlask",
  capacity: 32,
};

const extendedWaterBottle = {
  ...waterBottle,
  color: "blue",
  capacity: 24,
};

console.log(waterBottle); // Output: {brand: 'HydroFlask', capacity: 32}
console.log(extendedWaterBottle); // Output: {brand: 'HydroFlask', capacity: 24, color: 'blue'}

Dans cet exemple, extendedWaterBottle est créé en étendant les propriétés de waterBottle. De plus, la propriété color est ajoutée et la propriété capacity est remplacée.

Fusion d’objets

L’opérateur de propagation peut être utilisé pour fusionner les propriétés de plusieurs objets dans un nouvel objet unique. Ceci est particulièrement utile lorsque plusieurs sources de données doivent être combinées.

const apartmentFeatures = {
  size: "1200 square feet",
  bedrooms: 2,
  bathrooms: 2,
};

const apartmentDetails = {
  rent: 2000,
  location: "Downtown City",
};

const apartment = { ...apartmentFeatures, ...apartmentDetails };
console.log(apartment); // Output: {size: '1200 square feet', bedrooms: 2, bathrooms: 2, rent: 2000, location: 'Downtown City'}

Dans cet exemple, apartment est créé en fusionnant les propriétés de apartmentFeatures et apartmentDetails.