Kapitel 4: Spread-Operator und Rest-Parameter (...)

4.1 Spread-Operator ... Grundlagen

📦 Was ist der Spread-Operator?

Der Spread-Operator (...) erlaubt es dir, ein iterierbares Element (Array, String, Object) in einzelne Elemente zu "entpacken".

// Syntax
...iterable

---

🔄 Array entpacken

const numbers = [1, 2, 3];

// ❌ Alte Methode (ES5) - mit apply
var max = Math.max.apply(null, numbers);
console.log(max); // 3

// ✅ Neue Methode (ES6) - mit Spread
const max = Math.max(...numbers);
console.log(max); // 3

// Erklärung:
// Math.max(1, 2, 3) = 3
// ...numbers "entpackt" das Array zu: 1, 2, 3

---

📋 String in Array umwandeln

const str = "Hallo";

// ❌ Alte Methode (ES5)
var chars = str.split("");
console.log(chars); // ["H", "a", "l", "l", "o"]

// ✅ Neue Methode (ES6) - Spread
const chars = [...str];
console.log(chars); // ["H", "a", "l", "l", "o"]

---

🎯 Mehrere Arrays zusammenfügen

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Mit Spread
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// Auch mit zusätzlichen Elementen
const combined2 = [0, ...arr1, 4, 5, ...arr2];
console.log(combined2); // [0, 1, 2, 3, 4, 5, 4, 5, 6]

---

4.2 Array-Kopie und -Zusammenführung

📋 Array kopieren (Shallow Copy)

const original = [1, 2, 3];

// ❌ Falsch - Referenz kopieren (keine echte Kopie!)
const wrongCopy = original;
wrongCopy.push(4);
console.log(original); // [1, 2, 3, 4] ❌ Original wurde verändert!

// ✅ Richtig - Echte Kopie mit Spread
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3] ✅ Original unverändert
console.log(copy); // [1, 2, 3, 4]

---

📋 Array zusammenführen

const früchte = ["Apfel", "Banane"];
const gemüse = ["Karotte", "Tomate"];

// ❌ Alte Methode (ES5) - mit concat
var kombiniert = früchte.concat(gemüse);
console.log(kombiniert); // ["Apfel", "Banane", "Karotte", "Tomate"]

// ✅ Neue Methode (ES6) - mit Spread
const kombiniert = [...früchte, ...gemüse];
console.log(kombiniert); // ["Apfel", "Banane", "Karotte", "Tomate"]

// Mit zusätzlichen Elementen
const kombiniert2 = ["Birne", ...früchte, "Gurke", ...gemüse];
console.log(kombiniert2);
// ["Birne", "Apfel", "Banane", "Gurke", "Karotte", "Tomate"]

---

⚠️ Achtung: Shallow Copy (nur erste Ebene)

const original = [{ id: 1 }, { id: 2 }];

// Spread erstellt nur eine "flache" Kopie
const copy = [...original];

// Referenzen auf Objekte werden geteilt!
copy[0].id = 99;
console.log(original[0].id); // 99 ❌ (Objekt wurde verändert!)

// Lösung: Deep Copy (bei Bedarf)
const deepCopy = JSON.parse(JSON.stringify(original));

---

4.3 Object-Kopie und -Zusammenführung

📋 Object kopieren (ES2018+)

const person = { name: "Max", alter: 25 };

// ✅ Object kopieren mit Spread
const copy = { ...person };
console.log(copy); // { name: "Max", alter: 25 }

// Veränderung der Kopie
copy.alter = 26;
console.log(person.alter); // 25 ✅ Original unverändert

---

📋 Object zusammenführen

const basis = { name: "Max", alter: 25 };
const adresse = { stadt: "Berlin", land: "Deutschland" };

// Object zusammenführen
const kombiniert = { ...basis, ...adresse };
console.log(kombiniert);
// { name: "Max", alter: 25, stadt: "Berlin", land: "Deutschland" }

// Überschreiben von Eigenschaften
const mitÄnderung = { ...basis, alter: 26 };
console.log(mitÄnderung); // { name: "Max", alter: 26 }

---

🎯 Object mit neuen Eigenschaften erweitern

const person = { name: "Max", alter: 25 };

// Neue Eigenschaft hinzufügen
const erweitert = { ...person, stadt: "Berlin", land: "Deutschland" };
console.log(erweitert);
// { name: "Max", alter: 25, stadt: "Berlin", land: "Deutschland" }

---

4.4 Rest-Parameter ...args

📦 Was ist der Rest-Parameter?

Der Rest-Parameter (...args) erlaubt es einer Funktion, eine unbestimmte Anzahl von Argumenten als Array zu akzeptieren.

// Syntax
function funktion(...args) {
  // args ist ein Array
}

---

🔢 Unbestimmte Anzahl von Parametern

// ❌ Alte Methode (ES5) - mit arguments
function sumOld() {
  var sum = 0;
  for (var i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}
console.log(sumOld(1, 2, 3)); // 6

// ✅ Neue Methode (ES6) - mit Rest-Parameter
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

---

🎯 Rest-Parameter mit normalen Parametern

function introduce(name, ...hobbys) {
  console.log(`${name} hat folgende Hobbys:`);
  hobbys.forEach((hobby, index) => {
    console.log(`${index + 1}. ${hobby}`);
  });
}

introduce("Max", "Sport", "Lesen", "Reisen");
// Max hat folgende Hobbys:
// 1. Sport
// 2. Lesen
// 3. Reisen

---

📋 Rest-Parameter muss am Ende stehen

// ✅ Richtig
function funktion(a, b, ...rest) {
  console.log(a, b, rest);
}
funktion(1, 2, 3, 4, 5); // 1, 2, [3, 4, 5]

// ❌ Falsch (Syntax Error!)
function funktion(a, ...rest, b) {
  // ...
}

---

4.5 Unterschied zu arguments

🔍 arguments vs Rest-Parameter

Eigenschaft	arguments	Rest-Parameter (...args)
Typ	Array-ähnlich (kein echtes Array)	Echtes Array
Arrow Functions	❌ Nicht verfügbar	✅ Verfügbar
Array-Methoden	❌ Nicht direkt nutzbar	✅ Direkt nutzbar
Empfehlung	❌ Vermeiden	✅ Verwenden

---

📝 Beispiel: arguments Probleme

// ❌ Probleme mit arguments
function demo() {
  console.log(arguments); // { '0': 1, '1': 2, '2': 3 }

  // Kein echtes Array!
  arguments.push(4); // ❌ TypeError: arguments.push is not a function

  // Umwandlung in Array nötig
  var args = Array.prototype.slice.call(arguments);
  args.push(4); // ✅ Jetzt geht es
}

// ✅ Rest-Parameter (echtes Array)
function demoBetter(...args) {
  console.log(args); // [1, 2, 3]
  args.push(4); // ✅ Funktioniert
  console.log(args); // [1, 2, 3, 4]
}

---

🎯 Arrow Functions und arguments

// ❌ Arrow Functions haben kein eigenes arguments
const func1 = () => {
  console.log(arguments); // ❌ ReferenceError (oder globale arguments)
};

// ✅ Rest-Parameter funktioniert in Arrow Functions
const func2 = (...args) => {
  console.log(args); // ✅ [1, 2, 3]
};
func2(1, 2, 3);

---

4.6 Praxis: Funktionsparameter, Array-Duplikate entfernen

🔥 Beispiel 1: Funktionsparameter verarbeiten

// Szenario: Eine Funktion, die Konfigurationen akzeptiert
function createUser(name, ...options) {
  const defaultOptions = { alter: 25, stadt: "Unbekannt" };
  const userOptions = options.reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
  }, {});

  return {
    name,
    ...defaultOptions,
    ...userOptions,
  };
}

console.log(createUser("Max", ["alter", 30], ["stadt", "Berlin"]));
// { name: "Max", alter: 30, stadt: "Berlin" }

---

🔥 Beispiel 2: Array-Duplikate entfernen

// Methode 1: Spread + Set
const numbers = [1, 2, 2, 3, 3, 4, 5, 5];

const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4, 5]

// Erklärung:
// 1. new Set(numbers) erstellt ein Set ohne Duplikate
// 2. ... (Spread) entpackt das Set in ein Array

---

🔥 Beispiel 3: Funktion zum Zusammenführen beliebig vieler Arrays

function mergeArrays(...arrays) {
  return [...arrays.flat()];
}

console.log(mergeArrays([1, 2], [3, 4], [5, 6]));
// [1, 2, 3, 4, 5, 6]

---

🔥 Beispiel 4: Maximum aus beliebig vielen Zahlen finden

function findMax(...numbers) {
  return Math.max(...numbers);
}

console.log(findMax(1, 5, 3, 9, 2)); // 9
console.log(findMax(...[10, 20, 30])); // 30 (Spread kann kombiniert werden)

---

🎉 Zusammenfassung

In diesem Kapitel hast du gelernt:

• ✅ Spread-Operator (...) zum Entpacken von Arrays/Objekten
• ✅ Array kopieren und zusammenführen mit Spread
• ✅ Object kopieren und zusammenführen mit Spread (ES2018+)
• ✅ Rest-Parameter (...args) für unbestimmte Funktionsparameter
• ✅ Unterschied zwischen arguments und Rest-Parameter
• ✅ Praxisanwendungen (Duplikate entfernen, Funktionsparameter)

📝 Übung

1. Array kopieren und zusammenführen:

   const arr1 = [1, 2, 3];
   const arr2 = [4, 5, 6];
   // Erstelle eine Kopie von arr1 und füge arr2 hinzu

2. Object zusammenführen:

   const person = { name: "Max", alter: 25 };
   const job = { beruf: "Entwickler", firma: "ABC GmbH" };
   // Füge beide Objects zusammen

3. Rest-Parameter verwenden:

   // Erstelle eine Funktion 'sum', die beliebig viele Zahlen addiert

➡️ Nächstes Kapitel

In Kapitel 5 lernen wir Arrow Functions (Pfeilfunktionen) - eine der am häufigsten verwendeten ES6-Syntaxen!