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 ausgeführt werden:

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

Im Folgenden liegt der Fokus darauf, wie der Spread-Operator mit Objekten verwendet wird.

Spread-Operator

Der Spread-Operator (...) kann in verschiedenen Kontexten eingesetzt werden, aber eine der häufigsten Anwendungen ist das Erstellen neuer Objekte durch das Übertragen der Eigenschaften bestehender Objekte.

Hier ist die grundlegende Syntax des Spread-Operators zur Objekterstellung:

const newObject = { ...sourceObject }; 

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

Klonen eines Objekts

Betrachten wir, wie man ein Objekt klont. Wir erstellen ein neues Objekt mit denselben Eigenschaften und Werten wie das Quellobjekt. Änderungen am neuen Objekt wirken sich nicht auf das Originalobjekt aus.

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 und originalObject nur zwei.

Hinzufügen oder Modifizieren von Eigenschaften

Der Spread-Operator ist auch nützlich, um Eigenschaften in einem neuen Objekt hinzuzufügen oder zu modifizieren. Es können zusätzliche Eigenschaften eingefügt oder bestehende im neuen Objekt überschrieben werden.

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 der waterBottle mit dem Spread-Operator übernommen werden. Zusätzlich wird die Eigenschaft color hinzugefügt und die Eigenschaft capacity überschrieben.

Objekte zusammenführen

Der Spread-Operator kann verwendet werden, um die Eigenschaften mehrerer Objekte in einem neuen Objekt zu vereinen. Dies ist besonders nützlich, wenn mehrere Datenquellen 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.