L'opérateur de propagation, noté par ..., est un outil utile pour créer de nouveaux objets en fusionnant et en copiant des propriétés à partir d'objets existants. Avec l'opérateur de propagation, nous pouvons effectuer les tâches suivantes :

• Cloner des objets ;
• Ajouter ou modifier des propriétés ;
• Créer de nouveaux objets.

Concentrons-nous sur la façon d'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 est la création de nouveaux objets en propageant 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 que nous voulons créer ;
• sourceObject: L'objet source dont nous voulons copier les propriétés.

Clonage d'un Objet

Considérons 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 original.

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. C'est pourquoi clonedObject a trois propriétés et originalObject n'en a 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. Nous pouvons inclure des propriétés supplémentaires ou remplacer 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.

Fusionner des Objets

L'opérateur de propagation peut être utilisé pour fusionner les propriétés de plusieurs objets en un seul nouvel objet. Cela est particulièrement utile lorsque vous avez plusieurs sources de données à combiner.

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.