Destructuring

Die Destructuring-Syntax ist ein JavaScript-Ausdruck, der es ermöglicht, Werte aus Arrays oder Eigenschaften von Objekten in einzelne Variablen auszupacken.

Objekte

const restaurant = {
  restaurantName: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
  openingHours: {
    thu: { open: 12, close: 22 },
    fri: { open: 11, close: 23 },
    sat: { open: 0, close: 24 },
  },
};

const { restaurantName, openingHours, categories } = restaurant;

Variablennamen ändern

Wenn wir nicht die Propertynamen des Objektes als Variablennamen haben wollen, können wir diese auch umbenennen.

const { restaurantName: name, openingHours: hours, categories: tags } = restaurant;

Standardwerte

Jede destrukturierte Eigenschaft kann einen Standardwert haben. Der Standardwert wird verwendet, wenn die Eigenschaft nicht vorhanden ist oder einen undefinierten Wert hat. Er wird nicht verwendet, wenn die Eigenschaft den Wert null hat.

const { menu = [], starterMenu: starters = [] } = restaurant;

Arrays

const arr = [1, 2, 3];
const [x, y, z] = arr;

Elemente überspringen

const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],
}

let [main, , secondary] = restaurant.categories;

Variablen vertauschen

Normalerweise, wenn wir die Werte von zwei Variablen umtauschen möchten, würden wir eine temp-Variable erstellen:

const temp = main;
main = secondary;
secondary = temp;

Aber mit Destructuring können wir daraus einen Einzeiler machen:

[main, secondary] = [secondary, main];

Standardwerte

const [p = 1, q = 1, r = 1] = [8, 9];