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 vi udføre følgende opgaver:

• Klone objekter;
• Tilføje eller ændre egenskaber;
• Oprette nye objekter.

Lad os fokusere på, hvordan man bruger spread-operatoren med objekter.

Spread-operator

Spread-operatoren (...) kan anvendes i forskellige sammenhænge, men en af de mest almindelige anvendelser er til at oprette nye objekter ved at sprede egenskaberne fra eksisterende objekter.

Her er den grundlæggende syntaks for brug af spread-operatoren til objektoprettelse:

const newObject = { ...sourceObject }; 

• newObject: Det nye objekt, vi ønsker at oprette;
• sourceObject: Kildeobjektet, hvis egenskaber vi ønsker at kopiere.

Kloning af et objekt

Lad os se på, hvordan man kloner et objekt. Vi opretter et nyt objekt med de samme egenskaber og værdier som kildeobjektet. Ændringer foretaget på det nye objekt påvirker ikke det oprindelige objekt.

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

Spread-operatoren er også nyttig til at tilføje eller ændre egenskaber i et nyt objekt. Vi kan inkludere yderligere egenskaber eller overskrive eksisterende i det nye objekt.

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.

Sammenfletning af objekter

Spread-operatoren kan bruges til at sammenflette egenskaberne fra flere objekter i et enkelt nyt objekt. Dette er især nyttigt, når du har flere datakilder, der skal kombineres.

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.