3 Min

JavaScript Destructuring ist eine ES6 (ECMAScript 2015) Funktion, die es ermöglicht, Elemente aus Arrays oder Eigenschaften von Objekten auf eine einfachere und prägnantere Weise in einzelne Variablen zu extrahieren. Es vereinfacht den Code erheblich und macht ihn lesbarer.

1. Array Destructuring

Mit Array Destructuring kannst du einzelne Werte eines Arrays direkt Variablen zuweisen.

Beispiel:

const numbers = [1, 2, 3];

const [a, b, c] = numbers;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

In diesem Beispiel werden die Elemente des Arrays numbers auf die Variablen a, b und c zugewiesen.

Default-Werte:

Falls ein Element im Array nicht vorhanden ist, kannst du einen Default-Wert festlegen:

const numbers = [1, 2];

const [a, b, c = 3] = numbers;

console.log(c); // 3

Hier wird der dritte Wert (c) standardmäßig auf 3 gesetzt, da das Array nur zwei Elemente hat.

Überspringen von Elementen:

Du kannst auch bestimmte Elemente überspringen, indem du einfach leere Kommas verwendest:

const numbers = [1, 2, 3, 4];

const [, , c] = numbers; // Das dritte Element wird extrahiert

console.log(c); // 3

2. Object Destructuring

Object Destructuring funktioniert ähnlich wie Array Destructuring, aber hier extrahierst du Werte anhand der Schlüssel des Objekts.

Beispiel:

const person = {
  name: 'Alice',
  age: 30,
  profession: 'Developer'
};

const { name, age, profession } = person;

console.log(name); // Alice
console.log(age); // 30
console.log(profession); // Developer

Hier werden die name, age und profession-Eigenschaften des Objekts person den entsprechenden Variablen zugewiesen.

Umbenennen von Variablen:

Falls du die extrahierten Werte in eine andere Variablen mit anderem Namen speichern möchtest, kannst du die Variablen umbenennen:

const person = {
  name: 'Alice',
  age: 30
};

const { name: firstName, age: yearsOld } = person;

console.log(firstName); // Alice
console.log(yearsOld); // 30

Default-Werte in Objekten:

Auch hier kannst du Default-Werte definieren, falls eine Eigenschaft nicht im Objekt vorhanden ist:

const person = {
  name: 'Alice'
};

const { name, age = 25 } = person;

console.log(age); // 25

Da age nicht im Objekt person vorhanden ist, wird der Default-Wert 25 verwendet.

3. Verschachteltes Destructuring

Du kannst auch verschachtelte Arrays und Objekte destrukturieren:

Beispiel für verschachteltes Array Destructuring:

const nestedArray = [1, [2, 3]];

const [a, [b, c]] = nestedArray;

console.log(a); // 1
console.log(b); // 2
console.log(c); // 3

Beispiel für verschachteltes Object Destructuring:

const person = {
  name: 'Alice',
  address: {
    city: 'Berlin',
    zip: 10115
  }
};

const { name, address: { city, zip } } = person;

console.log(city); // Berlin
console.log(zip); // 10115

Hier werden die verschachtelten Werte des Objekts address direkt in city und zip extrahiert.

4. Kombination von Array- und Object Destructuring

Es ist möglich, beide Destructuring-Typen zu kombinieren:

const data = {
  title: 'JavaScript Guide',
  tags: ['ES6', 'Destructuring', 'JavaScript']
};

const { title, tags: [firstTag, secondTag] } = data;

console.log(title); // JavaScript Guide
console.log(firstTag); // ES6
console.log(secondTag); // Destructuring

Hier extrahieren wir den Wert title und gleichzeitig die ersten beiden Tags aus dem tags-Array.

5. Verwendung in Funktionen

Du kannst Destructuring auch in Funktionsparametern verwenden, um Objekte oder Arrays als Parameter zu destrukturieren:

Array Destructuring in Funktionen:

function printCoordinates([x, y]) {
  console.log(`X: ${x}, Y: ${y}`);
}

printCoordinates([10, 20]); // X: 10, Y: 20

Object Destructuring in Funktionen:

function printPerson({ name, age }) {
  console.log(`Name: ${name}, Age: ${age}`);
}

const person = { name: 'Alice', age: 30 };
printPerson(person); // Name: Alice, Age: 30

Hier werden die Funktionsparameter direkt aus dem übergebenen Objekt extrahiert.

Vorteile von Destructuring:

  • Kürzerer Code: Destructuring reduziert die Anzahl der Zeilen und vereinfacht den Code erheblich.
  • Lesbarkeit: Variablen werden klarer und lesbarer zugeordnet.
  • Flexibilität: Es ermöglicht die direkte Zuordnung von verschachtelten Datenstrukturen und das Umbenennen von Variablen.

Zusammenfassung:

JavaScript Destructuring ist eine sehr nützliche Funktion, die es Entwicklern ermöglicht, Arrays und Objekte effizient und prägnant zu entpacken. Es erleichtert die Arbeit mit komplexen Datenstrukturen und bietet viele Möglichkeiten zur Verbesserung der Code-Lesbarkeit und Wartbarkeit.

Updated:

Similar Content