Spredningsoperatoren, representert med ..., er et nyttig verktøy for å lage nye objekter ved å slå sammen og kopiere egenskaper fra eksisterende objekter. Med spredningsoperatoren kan vi utføre følgende oppgaver:

• Klone objekter;
• Legge til eller endre egenskaper;
• Lage nye objekter.

La oss se nærmere på hvordan vi bruker spredningsoperatoren med objekter.

Spredningsoperator

Når den brukes med objekter, kopierer spredningsoperatoren alle tellbare egenskaper fra kildeobjektet inn i et nytt objekt.

Grunnleggende syntaks:

const newObject = { ...sourceObject }; 

• newObject: det nye objektet vi ønsker å opprette;
• sourceObject: kildeobjektet vi vil kopiere egenskaper fra.

Kloning av et objekt

Spredningsoperatoren lar oss lage en grunnleggende (shallow) klone av et objekt. Dette er nyttig når vi ønsker å bevare det opprinnelige objektet og arbeide med en endret 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 eksemplet er clonedObject et nytt objekt som er en klone av originalObject. Eventuelle endringer gjort på clonedObject vil ikke påvirke originalObject. Derfor har clonedObject tre egenskaper, mens originalObject kun har to.

Legge til eller endre egenskaper

Du kan også bruke spredningsoperatoren for å opprette et nytt objekt med ekstra eller endrede egenskaper.

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 eksemplet blir extendedWaterBottle opprettet ved å spre egenskapene til waterBottle. I tillegg blir egenskapen color lagt til, og egenskapen capacity blir overskrevet.

Slå sammen objekter

Spredningsoperatoren kan slå sammen to eller flere objekter til ett. Dette er nyttig når funksjoner, innstillinger, konfigurasjoner eller data fra ulike kilder 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 eksempelet opprettes apartment ved å slå sammen egenskapene fra apartmentFeatures og apartmentDetails.