Soweit haben wir Objekte und deren Möglichkeiten "zum arbeiten" kennen gelernt.
+JavaScript selbst bietet aber darüber hinaus ein paar Syntaktische Möglichkeiten um mit diesen zu arbeiten.
+Wir können Inhalte aus Arrays oder Objekten "extrahieren", indem wir die entsprechende Syntax "Rückwärts" schreiben:
+
+ // Objekt deklarieren und "destructuren"
+ const myObj = { value: 5, type: 'number' };
+ // Werte sind nicht ans Objekt gebunden
+ const { value, type } = myObj;
+
+ // 5, 'number';
+ console.log(value, type);
+
+ // Array deklarieren und "destructuren"
+ const arr = [5, 6, 7, 8];
+ // Wir "überspringen" Werte durch leerlassen
+ const [five, six,, eight] = arr;
+
+ // 5, 6, 8
+ console.log(five, six, eight);
+ Ein Objekt-Destructure wird oft in Funktionsparametern verwendet
+
+ const obj = { name: 'Kevin', age: 23 };
+
+ function greet({ name }) {
+ console.log(`Hallo ${name}!`);
+ }
+ Die Bibliothek React verwendet ein Array-Destructure um State-Variablen mit einem Nutzer-gewählten Namen zu generieren.
+
+ const arr = [5, 6, 7, 8];
+
+ const [nennMichWieDuWillst] = arr;
+
+ // 5
+ console.log(nennMichWieDuWillst);
+ Ähnlich zum Spread-Operator besteht der Rest-Parameter aus drei Punkten vor einem Variablen-Namen.
+Diese sind aber in den Parametern einer Funktion zu finden.
+
+ function doSomething(paramA, paramB, ...paramRest) {
+ //
+ }
+ Mit dieser Syntax sind wir in der Lage, "so viele Parameter wie wir wollen" in einer Funktion entgegen zu nehmen.
+Wir verwenden diese Syntax aber mit Vorsicht. Wir können schnell den Überblick verlieren, was wir hier entgegen nehmen wollen.
+Ein positives Beispiel ist console.log()
Wir können beliebig viele Parameter mitgeben und alle werden nacheinander ausgeloggt
+
+ console.log('a', 5, true, {}, [], false, null, undefined);
+ Unsere eigene Logging Funktion könnte so aussehen:
+
+ const log = (...toLog) => {
+ toLog.forEach((item) => console.log(item));
+ };
+
+ log('a', 5, true, {}, [], false, null, undefined);
+ Wir erkennen: Ein als Rest-Parameter übergebener Wert wird ein Array sein, die Parameter werden in korrekter Reihenfolge in dieses Array gegeben.
+Es sind auch folgende Möglichkeiten gegeben:
+
+ const log = (level, ...toLog, options) => {
+ // ...
+ };
+
+ // level = 'WARN',
+ // toLog = ['Hallo', 'Welt']
+ // options = { colors: true }
+ console.log('WARN', 'Hallo', 'Welt', { colors: true });
+ Wir können davor oder danach weitere Variablen definieren, JS packt die Werte korrekt zusammen, im obigen Beispiel landet der letzte Parameter in der Variable "options".
+Es kann aber nur ein Rest-Parameter je Funktion Angegeben werden.
+Mithilfe des Spread-Operators können wir Iterierbare Variablen (Strings, Arrays, Objekte) "expandieren" (Ich nenne es gerne "auspacken").
+Der Spread-Operator besteht aus drei Punkten ( ... ) die vor der zu iterierenden Variable angeführt werden.
Use-Cases
+Seltener Use-Case, zeigt aber dafür umso einfacher was hier genau passiert
+
+ const text = "Hallo Welt!";
+
+ // H a l l o W e l t !
+ console.log(...text);
+ Indem wir 2 oder mehrere Arrays in ein neues "Spreaden", erhalten wir alle Elemente innerhalb eines Arrays.
+
+ const arr1 = ['H', 'a', 'l', 'l', 'o'];
+ const arr2 = ['W', 'e', 'l', 't', '!'];
+
+ // Wir können auch zusätzliche Inhalte dazu setzten
+ // (in diesem Fall ein Space zwischen den beiden Wörtern)
+ const joined = [...arr1, ' ', ...arr2];
+
+ console.log(joined);
+ Der Spread Operator sorgt Effektiv dafür, dass die Inhalte eines Arrays kopiert werden.
+
+ const arr = [1,2,3];
+ const copyByReference = arr;
+
+ // true
+ console.log(arr === copyByReference);
+
+ // false
+ console.log(arr === [...arr]);
+ Wichtig hierbei ist zu beachten, dass es sich hierbei um einen shallow-clone handelt.
+Die Inhalte selber werden "as is" kopiert, Objekte werden also nicht neu generiert sondern hier werden wieder nur Speicheradressen kopiert:
+
+ const obj = { value: 5 };
+ const arr = [obj];
+
+ const shallowClone = [...arr];
+
+ // true
+ console.log(shallowClone[0] === obj);
+