L'operatore spread, indicato da ..., è uno strumento utile per creare nuovi oggetti unendo e copiando proprietà da oggetti esistenti. Con l'operatore spread è possibile eseguire le seguenti operazioni:

• Clonare oggetti;
• Aggiungere o modificare proprietà;
• Creare nuovi oggetti.

Vediamo come utilizzare l'operatore spread con gli oggetti.

Operatore Spread

Quando viene utilizzato con gli oggetti, l'operatore spread copia tutte le proprietà enumerabili dall'oggetto sorgente in un nuovo oggetto.

Sintassi di base:

const newObject = { ...sourceObject }; 

• newObject: il nuovo oggetto che si desidera creare;
• sourceObject: l'oggetto sorgente di cui si vogliono copiare le proprietà.

Clonazione di un Oggetto

L'operatore spread consente di creare una copia superficiale (shallow clone) di un oggetto. Questo è utile quando si desidera preservare l'oggetto originale e lavorare con una copia modificata.

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'}

In questo esempio, clonedObject è un nuovo oggetto che rappresenta una copia di originalObject. Eventuali modifiche apportate a clonedObject non influenzeranno originalObject. Per questo motivo, clonedObject possiede tre proprietà mentre originalObject ne ha solo due.

Aggiunta o Modifica di Proprietà

È possibile utilizzare l'operatore spread anche per creare un nuovo oggetto con proprietà aggiuntive o modificate.

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'}

In questo esempio, extendedWaterBottle viene creato espandendo le proprietà di waterBottle. Inoltre, viene aggiunta la proprietà color e la proprietà capacity viene sovrascritta.

Unione di oggetti

L'operatore spread può unire due o più oggetti in uno solo. Questo è utile quando si combinano funzionalità, impostazioni, configurazioni o dati provenienti da fonti diverse.

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'}

In questo esempio, apartment viene creato unendo le proprietà di apartmentFeatures e apartmentDetails.