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 följande uppgifter utföras:

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

Fokus ligger på hur spridningsoperatorn används med objekt.

Spridningsoperatorn

Spridningsoperatorn (...) kan användas i olika sammanhang, men ett av de vanligaste användningsområdena är att skapa nya objekt genom att sprida egenskaperna från befintliga objekt.

Här är den grundläggande syntaxen för spridningsoperatorn vid objektgenerering:

const newObject = { ...sourceObject }; 

• newObject: Det nya objekt som ska skapas;
• sourceObject: Källobjektet vars egenskaper ska kopieras.

Klona ett objekt

Låt oss se hur man klonar ett objekt. Vi skapar ett nytt objekt med samma egenskaper och värden som källobjektet. Eventuella ändringar i det nya objektet påverkar inte originalobjektet.

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

Lägga till eller ändra egenskaper

Spread-operatorn är också användbar för att lägga till eller ändra egenskaper i ett nytt objekt. Vi kan inkludera ytterligare egenskaper eller skriva över befintliga i det nya 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 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 användas för att slå samman egenskaper från flera objekt till ett nytt objekt. Detta är särskilt användbart när du har flera datakällor att kombinera.

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 det här exemplet skapas apartment genom att egenskaperna från apartmentFeatures och apartmentDetails slås samman.