Der Spread-Operator, dargestellt durch ..., ist ein hilfreiches Werkzeug zum Erstellen neuer Objekte durch das Zusammenführen und Kopieren von Eigenschaften aus bestehenden Objekten. Mit dem Spread-Operator können folgende Aufgaben durchgeführt werden:

• Klonen von Objekten;
• Hinzufügen oder Ändern von Eigenschaften;
• Erstellen neuer Objekte.

Im Folgenden liegt der Fokus auf der Verwendung des Spread-Operators mit Objekten.

Spread-Operator

Wird der Spread-Operator mit Objekten verwendet, kopiert er alle aufzählbaren Eigenschaften aus dem Quellobjekt in ein neues Objekt.

Grundlegende Syntax:

const newObject = { ...sourceObject }; 

• newObject: das neue zu erstellende Objekt;
• sourceObject: das Quellobjekt, dessen Eigenschaften kopiert werden sollen.

Klonen eines Objekts

Der Spread-Operator ermöglicht das Erstellen eines flachen Klons eines Objekts. Dies ist nützlich, wenn das Originalobjekt erhalten bleiben und mit einer modifizierten Kopie gearbeitet werden soll.

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 diesem Beispiel ist clonedObject ein neues Objekt, das ein Klon von originalObject ist. Änderungen an clonedObject wirken sich nicht auf originalObject aus. Daher besitzt clonedObject drei Eigenschaften, während originalObject nur zwei hat.

Hinzufügen oder Modifizieren von Eigenschaften

Der Spread-Operator kann auch verwendet werden, um ein neues Objekt mit zusätzlichen oder geänderten Eigenschaften zu erstellen.

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 diesem Beispiel wird extendedWaterBottle erstellt, indem die Eigenschaften von waterBottle übernommen werden. Zusätzlich wird die Eigenschaft color hinzugefügt und die Eigenschaft capacity überschrieben.

Objekte zusammenführen

Der Spread-Operator kann zwei oder mehr Objekte zu einem einzigen Objekt zusammenführen. Dies ist nützlich, wenn Funktionen, Einstellungen, Konfigurationen oder Daten aus verschiedenen Quellen kombiniert werden sollen.

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 diesem Beispiel wird apartment erstellt, indem die Eigenschaften von apartmentFeatures und apartmentDetails zusammengeführt werden.