JavaScript: Der moderne, dynamische Weg zur Objekterzeugung – Spread-Syntax mit Kurzschluss-Logik

Stell dir vor, du hast folgenden Code:

articles.items.push({ „position“: position, „quantity“: quantity, „unit“: unit, „supplierId“: supplierId, „itemId“: itemId, „description“: [description] });

Du kannst das Objekt dynamisch aufbauen, sodass unit (oder andere Felder) nur gesetzt werden, wenn sie einen Wert haben.

Hier sind zwei gängige Lösungen:


Lösung 1: Objekt vorher aufbauen (mit if)

const item = {
position,
quantity,
supplierId,
itemId,
description: [description]
};

if (unit) {
item.unit = unit;
}

articles.items.push(item);

Lösung 2: Mit Spread-Syntax und Kurzschluss-Logik (kürzer)

articles.items.push({
position,
quantity,
...(unit && { unit }), // wird nur gesetzt, wenn unit truthy ist
supplierId,
itemId,
description: [description]
});

🔍 Hinweis: ...(unit && { unit }) bedeutet:
– Wenn unit leer (z. B. "", null, undefined) ist, wird nichts hinzugefügt.
– Wenn unit z. B. "kg" ist, wird { unit: "kg" } ins Objekt eingefügt.

Hier ein präziser Performance-Vergleich der beiden Varianten:


🔬 Lösung 1: Klassisches if

const item = { ... };
if (unit) {
item.unit = unit;
}
  • Vorteile:
    • Sehr performant, da klarer Ablauf
    • Kein Overhead durch Spread oder temporäre Objekte
  • Nachteile:
    • Etwas mehr Code

🔬 Lösung 2: Spread-Syntax mit Kurzschluss

{
...(unit && { unit })
}
  • Vorteile:
    • Kürzer, eleganter
  • Nachteile:
    • Intern erzeugt temporär ein Objekt, das wieder aufgelöst wird
    • Etwas mehr Rechenaufwand (aber minimal)

📊 Performance-Fazit

TestfallGeschwindigkeit (relativ)
if (unit) item.unit = ...🟢 Schneller (~100%)
...(unit && { unit })🟡 Etwas langsamer (~80–95%)

Der Unterschied ist messbar, aber irrelevant in normalen Anwendungen. Bei Millionen Objekten oder Echtzeit-Code (z. B. in Games, Rendering) wäre das if die bessere Wahl.


Empfehlung:

  • Für Performance-Kritischesif-Variante
  • Für Klarheit & Kürze (Business-Logik, APIs) → Spread-Syntax ist absolut ok