Destructuring

Destructuring ist eine Kurzschreibweise, um Werte aus Objekten oder Arrays in eigene Variablen zu entpacken. In React begegnet dir das Muster ständig — bei Props, bei useState und bei API-Daten.

Objekt-Destructuring

Ohne Destructuring greifst du mit Punktnotation auf Eigenschaften zu:

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

const name = student.name;
const alter = student.alter;
const fach = student.fach;

Mit Destructuring extrahierst du die Werte in einer einzigen Zeile:

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

const { name, alter, fach } = student;

console.log(name);  // "Dan Abramov"
console.log(alter); // 30
console.log(fach);  // "Informatik"

Die Variablennamen müssen den Schlüsseln im Objekt entsprechen. Die Reihenfolge spielt keine Rolle — es zählt nur der Name.

Umbenennen

Wenn du einen anderen Variablennamen brauchst, verwendest du einen Doppelpunkt:

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

const { name: studentName, fach: studienfach } = student;

console.log(studentName);  // "Dan Abramov"
console.log(studienfach);  // "Informatik"

name: studentName bedeutet: „Nimm den Wert von name und speichere ihn in der Variable studentName.”

Standardwerte

Wenn eine Eigenschaft fehlt, ist die Variable undefined. Du kannst einen Standardwert setzen:

const student = { name: "Dan Abramov" };

const { name, fach = "Unbekannt" } = student;

console.log(fach); // "Unbekannt"

Der Standardwert greift nur, wenn die Eigenschaft undefined ist — nicht bei null oder "".

Verschachtelt

Destructuring funktioniert auch in die Tiefe:

const student = {
  name: "Dan Abramov",
  adresse: {
    stadt: "Berlin",
    plz: "10115",
  },
};

const { adresse: { stadt, plz } } = student;

console.log(stadt); // "Berlin"
console.log(plz);   // "10115"

Vorsicht

Bei verschachteltem Destructuring existiert die Zwischenvariable nicht. In diesem Beispiel gibt es keine Variable adresse — nur stadt und plz.

Array-Destructuring

Bei Arrays funktioniert Destructuring über die Position, nicht über Namen:

const farben = ["rot", "grün", "blau"];

const [erste, zweite, dritte] = farben;

console.log(erste);  // "rot"
console.log(zweite); // "grün"
console.log(dritte); // "blau"

Du kannst Positionen überspringen, indem du ein Komma ohne Variablennamen setzt:

const farben = ["rot", "grün", "blau"];

const [, , dritte] = farben;

console.log(dritte); // "blau"

Standardwerte

Genau wie bei Objekten kannst du Standardwerte setzen:

const zahlen = [42];

const [a, b = 0] = zahlen;

console.log(a); // 42
console.log(b); // 0

Destructuring in Funktionsparametern

Du kannst Destructuring direkt in der Parameterliste einer Funktion verwenden. Statt das gesamte Objekt entgegenzunehmen und dann darauf zuzugreifen:

function greet(student) {
  return `Hallo ${student.name}, du studierst ${student.fach}`;
}

…destrukturierst du direkt:

function greet({ name, fach }) {
  return `Hallo ${name}, du studierst ${fach}`;
}

greet({ name: "Dan Abramov", fach: "Informatik" });
// "Hallo Dan Abramov, du studierst Informatik"

Das geht auch mit Standardwerten:

function greet({ name, fach = "Unbekannt" }) {
  return `Hallo ${name}, du studierst ${fach}`;
}

Props-Destructuring

In React-Komponenten wird genau dieses Muster für Props verwendet:

function StudentCard({ name, fach, semester }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{fach} — {semester}. Semester</p>
    </div>
  );
}

Statt props.name, props.fach usw. destrukturierst du die Props direkt im Parameter — kürzer und lesbarer.

Warum das für React wichtig ist

Destructuring begegnet dir in React in drei typischen Situationen:

1. Props destrukturieren — wie gerade gezeigt:

function StudentCard({ name, fach }) {
  return <h2>{name} — {fach}</h2>;
}

2. useState — Array-Destructuring:

const [count, setCount] = useState(0);

useState gibt ein Array mit zwei Elementen zurück — dem aktuellen Wert und einer Setter-Funktion. Ohne Destructuring müsstest du schreiben:

const stateArray = useState(0);
const count = stateArray[0];
const setCount = stateArray[1];

3. API-Daten entpacken:

const { data, error, loading } = useFetch("/api/students");

Destructuring macht den Code in allen drei Fällen deutlich lesbarer.