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 richten we ons op het gebruik van de spread-operator met objecten.

Spread-operator

De spread-operator (...) kan in verschillende contexten worden gebruikt, maar een van de meest voorkomende toepassingen is het aanmaken van nieuwe objecten door de eigenschappen van bestaande objecten te verspreiden.

Hier volgt de basis-syntaxis van de spread-operator voor het aanmaken van objecten:

const newObject = { ...sourceObject }; 

• newObject: Het nieuwe object dat we willen aanmaken;
• sourceObject: Het bronobject waarvan we de eigenschappen willen kopiëren.

Een object klonen

Beschouwing van het klonen van een object. Er wordt een nieuw object aangemaakt met dezelfde eigenschappen en waarden als het bronobject. Wijzigingen in het nieuwe object hebben geen invloed op het oorspronkelijke object.

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 in clonedObject hebben geen invloed op originalObject. Daarom heeft clonedObject drie eigenschappen en originalObject slechts twee.

Eigenschappen toevoegen of wijzigen

De spread-operator is ook nuttig voor het toevoegen of wijzigen van eigenschappen in een nieuw object. Extra eigenschappen kunnen worden toegevoegd of bestaande kunnen worden overschreven in het nieuwe object.

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 de waterBottle te spreiden. Daarnaast wordt de eigenschap color toegevoegd en wordt de eigenschap capacity overschreven.

Objecten samenvoegen

De spread-operator kan worden gebruikt om de eigenschappen van meerdere objecten samen te voegen tot één nieuw object. Dit is vooral nuttig wanneer je meerdere gegevensbronnen wilt combineren.

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 gemaakt door de eigenschappen van apartmentFeatures en apartmentDetails samen te voegen.