Spread-operatoren, angivet med ..., er et nyttigt værktøj til at oprette nye objekter ved at sammenflette og kopiere egenskaber fra eksisterende objekter. Med spread-operatoren kan følgende opgaver udføres:

• Kloning af objekter;
• Tilføjelse eller ændring af egenskaber;
• Oprettelse af nye objekter.

Fokus på anvendelse af spread-operatoren med objekter.

Spread-operator

Når den bruges med objekter, kopierer spread-operatoren alle optællelige egenskaber fra kildeobjektet til et nyt objekt.

Grundlæggende syntaks:

const newObject = { ...sourceObject }; 

• newObject: det nye objekt, der ønskes oprettet;
• sourceObject: kildeobjektet, hvis egenskaber skal kopieres.

Kloning af et objekt

Spread-operatoren muliggør oprettelse af en lavt klonet kopi af et objekt. Dette er nyttigt, når det oprindelige objekt skal bevares, og der arbejdes med en ændret kopi.

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

I dette eksempel er clonedObject et nyt objekt, der er en klon af originalObject. Ændringer foretaget på clonedObject vil ikke påvirke originalObject. Derfor har clonedObject tre egenskaber, mens originalObject kun har to.

Tilføjelse eller ændring af egenskaber

Du kan også bruge spread-operatoren til at oprette et nyt objekt med yderligere eller ændrede egenskaber.

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

I dette eksempel oprettes extendedWaterBottle ved at sprede egenskaberne fra waterBottle. Derudover tilføjes egenskaben color, og egenskaben capacity overskrives.

Sammensmeltning af objekter

Spread-operatoren kan sammenflette to eller flere objekter til ét. Dette er nyttigt ved kombination af funktioner, indstillinger, konfigurationer eller data fra forskellige kilder.

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

I dette eksempel oprettes apartment ved at sammenflette egenskaberne fra apartmentFeatures og apartmentDetails.