De spread-operator, aangeduid met ..., is een handig hulpmiddel voor het aanmaken van nieuwe objecten door eigenschappen van bestaande objecten te kopiëren en samen te voegen. Met de spread-operator kunnen de volgende taken worden uitgevoerd:

• Objecten klonen;
• Eigenschappen toevoegen of wijzigen;
• Nieuwe objecten aanmaken.

Hier wordt gefocust op het gebruik van de spread-operator met objecten.

Spread-operator

Wanneer gebruikt met objecten, kopieert de spread-operator alle enumerable eigenschappen van het bronobject naar een nieuw object.

Basis-syntaxis:

const newObject = { ...sourceObject }; 

• newObject: het nieuwe object dat aangemaakt wordt;
• sourceObject: het bronobject waarvan de eigenschappen worden gekopieerd.

Een object klonen

Met de spread-operator kan een shallow clone van een object worden gemaakt. Dit is nuttig wanneer het originele object behouden moet blijven en er met een aangepaste kopie gewerkt wordt.

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'}

In dit voorbeeld is clonedObject een nieuw object dat een kloon is van originalObject. Wijzigingen die worden aangebracht in clonedObject hebben geen invloed op originalObject. Daarom heeft clonedObject drie eigenschappen en heeft originalObject er slechts twee.

Eigenschappen toevoegen of wijzigen

De spread-operator kan ook worden gebruikt om een nieuw object te maken met extra of gewijzigde eigenschappen.

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'}

In dit voorbeeld wordt extendedWaterBottle gemaakt door de eigenschappen van waterBottle te verspreiden. Daarnaast wordt de eigenschap color toegevoegd en wordt de eigenschap capacity overschreven.

Objecten samenvoegen

De spread-operator kan twee of meer objecten samenvoegen tot één object. Dit is nuttig bij het combineren van kenmerken, instellingen, configuraties of gegevens uit verschillende bronnen.

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'}

In dit voorbeeld wordt apartment aangemaakt door de eigenschappen van apartmentFeatures en apartmentDetails samen te voegen.