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 tâches suivantes :

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

Concentrons-nous sur l'utilisation de l'opérateur de propagation avec les objets.

Opérateur de propagation

Lorsqu'il est utilisé avec des objets, l'opérateur de propagation copie toutes les propriétés énumérables de l'objet source dans un nouvel objet.

Syntaxe de base :

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

L'opérateur de propagation permet de créer un clonage superficiel d'un objet. Cela est utile lorsque l'on souhaite préserver l'objet original et travailler avec une copie modifiée.

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 possède trois propriétés tandis que originalObject n'en a que deux.

Ajout ou modification de propriétés

Il est également possible d'utiliser l'opérateur de propagation pour créer un nouvel objet avec des propriétés supplémentaires ou modifiées.

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 propageant 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 permet de fusionner deux objets ou plus en un seul. Ceci est utile pour combiner des fonctionnalités, des paramètres, des configurations ou des données provenant de différentes sources.

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.