Spridningsoperatorn, betecknad med ..., är ett användbart verktyg för att skapa nya objekt genom att slå samman och kopiera egenskaper från befintliga objekt. Med spridningsoperatorn kan vi utföra följande uppgifter:

• Klona objekt;
• Lägga till eller ändra egenskaper;
• Skapa nya objekt.

Låt oss fokusera på hur man använder spridningsoperatorn med objekt.

Spridningsoperator

När den används med objekt kopierar spridningsoperatorn alla uppräkningsbara egenskaper från källobjektet till ett nytt objekt.

Grundläggande syntax:

const newObject = { ...sourceObject }; 

• newObject: det nya objekt vi vill skapa;
• sourceObject: källobjektet vars egenskaper vi vill kopiera.

Klona ett objekt

Spridningsoperatorn gör det möjligt att skapa en ytlig klon av ett objekt. Detta är användbart när vi vill bevara det ursprungliga objektet och arbeta med en modifierad kopia.

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 det här exemplet är clonedObject ett nytt objekt som är en klon av originalObject. Eventuella ändringar som görs i clonedObject påverkar inte originalObject. Därför har clonedObject tre egenskaper och originalObject har endast två.

Lägga till eller ändra egenskaper

Spridningsoperatorn kan även användas för att skapa ett nytt objekt med ytterligare eller ändrade 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 det här exemplet skapas extendedWaterBottle genom att egenskaperna från waterBottle sprids ut. Dessutom läggs egenskapen color till och egenskapen capacity skrivs över.

Slå samman objekt

Spridningsoperatorn kan slå samman två eller flera objekt till ett. Detta är användbart vid kombination av funktioner, inställningar, konfigurationer eller data från olika källor.

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 detta exempel skapas apartment genom att egenskaperna från apartmentFeatures och apartmentDetails slås samman.