Erweiterte Methodiken auf Objekten

Object & Array Destructure

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);

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

• String in ein Char-Array überführen
• Iterierbare Elemente zusammenführen (concat)
• Shallow-Cloning

Beispiel Strings

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);

Concat-ähnliches Verhalten

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);

Shallow Cloning

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);

Ä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.