Signatur
Beschreibung
Die Spread-Syntax (...) erlaubt es, ein Iterable – also jeden Wert, der das Symbol.iterator-Protokoll implementiert (Arrays, Strings, Sets, Maps, NodeLists usw.) – an Stellen zu „entfalten", an denen null oder mehr Argumente bzw. Elemente erwartet werden. Dadurch lassen sich Werte direkt in Funktionsaufrufe, Array-Literale oder (mit Object.assign-Semantik) in Objekt-Literale einbetten, ohne zusätzliche Hilfsmethoden zu benötigen.
Es gibt drei Hauptanwendungsfälle:
- Funktionsaufruf:
Math.max(...zahlen)— übergibt alle Elemente eines Arrays als einzelne Argumente. - Array-Literal:
[...arr1, ...arr2]— fügt die Elemente aller genannten Iterables in ein neues Array ein (flacher Kopie der obersten Ebene). - Objekt-Literal (ES2018):
{ ...obj1, ...obj2 }— kopiert alle eigenen, aufzählbaren Eigenschaften in ein neues Objekt. Doppelte Schlüssel werden durch den zuletzt genannten Wert überschrieben.
Die Spread-Syntax ist eine rein flache Operation: Verschachtelte Objekte oder Arrays werden nicht tief kopiert, sondern nur deren Referenz übernommen. Sie eignet sich ideal für das unveränderliche Erzeugen neuer Arrays/Objekte (z. B. in React-State-Updates), das Zusammenführen von Arrays und als Ersatz für Function.prototype.apply().
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $iterable Pflicht | Iterable | Object | — | Ein Iterable (z. B. Array, String, Set, Map, NodeList) für Array-Literale und Funktionsaufrufe, oder ein beliebiges Objekt (für Objekt-Literale, ES2018+). Nicht-iterierbare Primitives wie number oder boolean erzeugen in Objekt-Spreads ein leeres Objekt und in Array-Spreads einen TypeError. |
Rückgabewert
Beispiele
Array zusammenführen und kopieren
const a = [1, 2, 3];
const b = [4, 5, 6];
// Flache Kopie
const kopie = [...a];
console.log(kopie); // [1, 2, 3]
console.log(kopie === a); // false — neues Array
// Zusammenführen
const gesamt = [...a, ...b];
console.log(gesamt); // [1, 2, 3, 4, 5, 6]
// Elemente einfügen
const erweitert = [0, ...a, 3.5, ...b, 7];
console.log(erweitert); // [0, 1, 2, 3, 3.5, 4, 5, 6, 7]Spread in Funktionsaufrufen (Ersatz für .apply())
const zahlen = [3, 1, 4, 1, 5, 9, 2, 6];
// Ohne Spread: Math.max.apply(null, zahlen)
const maximum = Math.max(...zahlen);
console.log(maximum); // 9
// Datum aus Array-Teilen erzeugen
const datumTeile = [2024, 11, 25]; // Jahr, Monat (0-basiert), Tag
const weihnachten = new Date(...datumTeile);
console.log(weihnachten.toDateString()); // Wed Dec 25 2024Objekt-Spread: Kopieren und Zusammenführen (ES2018)
const defaults = { theme: 'light', sprache: 'de', debug: false };
const nutzerConfig = { theme: 'dark', schriftgröße: 16 };
// Objekte zusammenführen — spätere Schlüssel gewinnen
const config = { ...defaults, ...nutzerConfig };
console.log(config);
// { theme: 'dark', sprache: 'de', debug: false, schriftgröße: 16 }
// Unveränderliches Update (React-Muster)
const state = { nutzer: 'Anna', punkte: 42, aktiv: true };
const neuerState = { ...state, punkte: state.punkte + 10 };
console.log(neuerState);
// { nutzer: 'Anna', punkte: 52, aktiv: true }String und andere Iterables entfalten
// String in einzelne Zeichen aufteilen
const zeichen = [..,'Hallo'];
console.log(zeichen); // ['H', 'a', 'l', 'l', 'o']
// Set in Array umwandeln (Duplikate entfernen)
const duplikate = [1, 2, 2, 3, 3, 3];
const eindeutig = [...new Set(duplikate)];
console.log(eindeutig); // [1, 2, 3]
// Map-Einträge entfalten
const karte = new Map([['a', 1], ['b', 2]]);
const einträge = [...karte];
console.log(einträge); // [['a', 1], ['b', 2]]// Wichtig · Fallstricke
Nur flaches Kopieren: Spread erzeugt keine Tiefkopie. Enthält ein Array oder Objekt verschachtelte Objekte, werden lediglich deren Referenzen übernommen. Für echte Tiefkopien structuredClone() (ES2022) oder JSON.parse(JSON.stringify(...)) (mit Einschränkungen) verwenden.
- Objekt-Spread (ES2018) wird in allen modernen Browsern unterstützt, ist jedoch nicht Teil von ES2015 — bei sehr alten Zielumgebungen ist ein Transpiler (Babel) nötig.
- Performance: Bei sehr großen Arrays kann Spread bei Funktionsaufrufen an Stack-Größen-Limits stoßen (wie auch
.apply()). Besser dann iterativ vorgehen. - Spread ≠ Rest-Parameter: Die drei Punkte
...in einer Funktionsdefinition (function f(...args)) sind die Rest-Syntax, die das Gegenteil macht: mehrere Argumente in ein Array sammeln. Spread entfaltet, Rest sammelt. - Nicht-iterierbare Werte (z. B. einfache Zahlen oder
null/undefined) in einem Array-Spread führen zu einemTypeError. Im Objekt-Spread werdennullundundefinedhingegen stillschweigend ignoriert.