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

L'operatore spread (...) può essere utilizzato in diversi contesti, ma uno degli usi più comuni è la creazione di nuovi oggetti tramite la diffusione delle proprietà di oggetti esistenti.

Ecco la sintassi di base dell'operatore spread utilizzato per la creazione di oggetti:

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

Consideriamo come clonare un oggetto. Creeremo un nuovo oggetto con le stesse proprietà e valori dell'oggetto sorgente. Qualsiasi modifica apportata al nuovo oggetto non influenzerà l'oggetto originale.

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 è una copia di originalObject. Qualsiasi modifica apportata a clonedObject non influenzerà originalObject. Per questo motivo clonedObject ha tre proprietà mentre originalObject ne ha solo due.

Aggiunta o modifica di proprietà

Lo spread operator è utile anche per aggiungere o modificare proprietà in un nuovo oggetto. È possibile includere proprietà aggiuntive o sovrascrivere quelle esistenti nel nuovo oggetto.

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ò essere utilizzato per unire le proprietà di più oggetti in un unico nuovo oggetto. Questo è particolarmente utile quando si hanno più fonti di dati da combinare.

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.