Spread & Rest

Die drei Punkte (...) haben in JavaScript zwei Bedeutungen, je nachdem wo sie stehen:

Spread — breitet Werte aus einem Array oder Objekt aus
Rest — sammelt mehrere Werte in ein Array ein

Die Syntax ist identisch — der Kontext entscheidet.

Spread bei Arrays

Der Spread-Operator „entpackt” ein Array an Ort und Stelle:

const zahlen = [1, 2, 3];

console.log(...zahlen);    // 1 2 3 (einzelne Werte)
console.log([...zahlen]);  // [1, 2, 3] (neues Array mit denselben Werten)

Arrays zusammenführen:

const anfang = [1, 2, 3];
const ende = [4, 5, 6];

const alle = [...anfang, ...ende];
// [1, 2, 3, 4, 5, 6]

Elemente hinzufügen:

const studenten = ["Dan", "Sophie"];

const mitMax = [...studenten, "Max"];
// ["Dan", "Sophie", "Max"]

const mitAnnaVorn = ["Anna", ...studenten];
// ["Anna", "Dan", "Sophie"]

Array kopieren:

const original = [1, 2, 3];
const kopie = [...original];

kopie.push(4);

console.log(original); // [1, 2, 3] — unverändert
console.log(kopie);    // [1, 2, 3, 4]

Spread erstellt eine flache Kopie (shallow copy). Verschachtelte Objekte und Arrays werden nur als Referenz kopiert, nicht tief geklont:

const studenten = [{ name: "Dan" }, { name: "Sophie" }];
const kopie = [...studenten];

kopie[0].name = "Max";
console.log(studenten[0].name); // "Max" — auch das Original wurde geändert!

Spread bei Objekten

Spread funktioniert genauso mit Objekten:

const student = { name: "Dan", fach: "Informatik" };

const kopie = { ...student };
// { name: "Dan", fach: "Informatik" }

Objekte zusammenführen:

const basisDaten = { name: "Dan", alter: 30 };
const studiendaten = { fach: "Informatik", semester: 3 };

const student = { ...basisDaten, ...studiendaten };
// { name: "Dan", alter: 30, fach: "Informatik", semester: 3 }

Einzelne Eigenschaften überschreiben:

const student = { name: "Dan", fach: "Informatik", semester: 3 };

const aktualisiert = { ...student, semester: 4 };
// { name: "Dan", fach: "Informatik", semester: 4 }

Die Reihenfolge ist entscheidend — spätere Werte überschreiben frühere:

const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };

console.log({ ...a, ...b }); // { x: 1, y: 3, z: 4 }
console.log({ ...b, ...a }); // { x: 1, y: 2, z: 4 }

Rest-Parameter

Rest sammelt die übrigen Argumente einer Funktion in ein Array:

function summe(erster, ...rest) {
  console.log(erster); // 1
  console.log(rest);   // [2, 3, 4, 5]
  return rest.reduce((acc, val) => acc + val, erster);
}

summe(1, 2, 3, 4, 5); // 15

Der Rest-Parameter muss immer der letzte Parameter sein:

// Richtig
function fn(a, b, ...rest) {}

// Fehler!
function fn(...rest, a, b) {}

Rest bei Destructuring

Rest funktioniert auch beim Destructuring — sowohl bei Objekten als auch bei Arrays:

Objekt — bestimmte Eigenschaften herausziehen, den Rest behalten:

const student = { name: "Dan", fach: "Informatik", alter: 30, semester: 3 };

const { name, ...restDaten } = student;

console.log(name);      // "Dan"
console.log(restDaten); // { fach: "Informatik", alter: 30, semester: 3 }

Array — erste Elemente herauspicken, den Rest behalten:

const [erster, zweiter, ...rest] = [1, 2, 3, 4, 5];

console.log(erster);  // 1
console.log(zweiter); // 2
console.log(rest);    // [3, 4, 5]

Typische Verwendung in React

Props weiterreichen:

function Card({ title, ...rest }) {
  return (
    <div className="card" {...rest}>
      <h2>{title}</h2>
    </div>
  );
}

// Alle zusätzlichen Props (id, onClick, etc.) landen auf dem div
<Card title="Hallo" id="main" onClick={handleClick} />

State immutabel aktualisieren:

const [student, setStudent] = useState({
  name: "Dan",
  fach: "Informatik",
  semester: 3,
});

// Nur semester ändern, alles andere behalten
setStudent({ ...student, semester: 4 });

Listen erweitern:

const [studenten, setStudenten] = useState(["Dan", "Sophie"]);

// Max hinzufügen, ohne das Original-Array zu verändern
setStudenten([...studenten, "Max"]);