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

Spredningsoperatoren (...) kan brukes i ulike sammenhenger, men en av de vanligste bruksområdene er å lage nye objekter ved å spre egenskapene til eksisterende objekter.

Her er den grunnleggende syntaksen for å bruke spredningsoperatoren til å opprette objekter:

const newObject = { ...sourceObject }; 

• newObject: Det nye objektet vi ønsker å opprette;
• sourceObject: Kildeobjektet vi ønsker å kopiere egenskapene fra.

Kloning av et objekt

La oss se på hvordan man kan klone et objekt. Vi oppretter et nytt objekt med de samme egenskapene og verdiene som kildeobjektet. Eventuelle endringer gjort i det nye objektet påvirker ikke det opprinnelige objektet.

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 i clonedObject vil ikke påvirke originalObject. Derfor har clonedObject tre egenskaper, mens originalObject kun har to.

Legge til eller endre egenskaper

Spread-operatoren er også nyttig for å legge til eller endre egenskaper i et nytt objekt. Vi kan inkludere flere egenskaper eller overstyre eksisterende i det nye objektet.

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 legges egenskapen color til, og egenskapen capacity blir overstyrt.

Slå sammen objekter

Spredningsoperatoren kan brukes til å slå sammen egenskapene fra flere objekter til ett nytt objekt. Dette er spesielt nyttig når du har flere datakilder som 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 eksemplet blir apartment opprettet ved å slå sammen egenskapene fra apartmentFeatures og apartmentDetails.