Destructuring

Wenn wir einen Wert aus einem Array oder einem Objekt haben wollen, müssen wir eine Variable deklarieren und den Wert dieser Variable zuweisen.

const fruitBasket = ['apple', 'banana', 'lemon'];
const apple = fruitBasket[0];

In ES6 kann man Variable destrukturieren – so nennt man einen Prozess, mit dem man mehrere Variable in einem Schritt deklarieren und zuweisen kann. Das geht mit Arrays und Objekten, mit kleinen Unterschieden im Verfahren.

Destructuring Arrays

Um einen Array zu destrukturieren, schreiben wir die gewünschten Variablennamen in eine eckige Klammer. Der erste Name bezieht sich immer auf das erste Element im Array, der zweite Name auf das zweite und so weiter. Wichtiger Unterschied zum Objekt: Die Namen können frei gewählt werden!

const fruitBasket = ['apple', 'banana', 'lemon'];
const [apple, banana] = fruitBasket;

console.log(apple);   // apple
console.log(banana);  // banana

Werden mehr Elemente destrukturiert als der Array Elemente beinhaltet, sind die überschüssigen Elemente einfach undefined.

const fruitBasket = ['apple', 'banana'];
const [apple, banana, lemon] = fruitBasket;

console.log(lemon);   // undefined

Destructuring objects

Um ein Objekt zu dekonstruieren, schreibt man den Namen des Keys, den man als Variable deklarieren möchte, in {} geschwungene Klammern:

const cat = {
  firstName: 'Pedro',
  lastName: 'Riese',
}
// statt umständlich eine Variable zu deklarieren ...
const catsFirstName = cat.firstName;
const catsLastName = cat.lastName;

// ... dekonstruieren wir elegant:
const { firstName, lastName } = cat;
console.log(firstName, lastName);

JavaScript weist hier cat.firstName der ersten und cat.lastName der zweiten Variable zu.

Destructuring with a different variable

Beim Destrukturieren weisen wir Variable zu. Das bedeutet auch, dass wir nicht zwei Variable mit dem gleichen Namen haben können. So etwas kann passieren, wenn wir zuvor schon eine Variable deklariert haben, und dieser Variablenname ein Key des Objekts ist, das wir dekonstruieren wollen. In so einem Fall können wir dem Object-Key mit einem : einen neuen Namen zuweisen:

const catName = 'Pedro';
const cat = {
  catName: 'Pedro',
  catColor: 'black',
  catAge: 4,
};

const {catName: sweetCatName, catColor, catAge} = cat;
console.log(sweetCatName, catColor, catAge);  // Pedro black 4

Destructuring function arguments

Wenn das Argument einer Funktion ein Array oder ein Objekt ist, können wir dieses destrukturieren:

const scores = [100, 99, 98];
function firstThree ([first, second, third]) {
  return {
    first: first,
    second: second,
    third: third
  }
}

console.log(firstThree(scores));
// {
//   first: 100,
//   second: 99,
//   third: 98
// }

Default parameters when destructuring

Es ist möglich, Fallback-Werte für destrukturierte Variable mit = zu hinterlegen:

For destructured arrays

const emojis = ['🤩'];
const { firstEmoji, secondEmoji = '😵'} = emojis;
console.log(emojis);
console.log(firstEmoji, secondEmoji);

For destructured objects

const course = { name: 'Learn JavaScript' }
const { description = 'Best JavaScript course ever!' } = course

console.log(description) // Best JavaScript course ever!

Excercise

Perform these actions with the following set of data:

1. Get the first two items in posts with destructuring.
2. Get the id and title of the first post with destructuring.
3. Rename the title of the first post to content while you destructure.
4. The first post doesn’t have a description. Create one as you destructure. Set it to ‘Nothing is better than leaving the description empty.’

const posts = [
  {
    id: 800,
    title: 'This is 💩',
    status: 'published',
  },
  {
    id: 801,
    title: 'Pooing is a natural thing.',
    status: 'published',
  },
  {
    id: 802,
    title: 'Poo jokes are getting irritating',
    status: 'published',
  },
];

const [post1, post2] = posts;
console.log(post1, post2);

const {id, title} = post1;
console.log(id, title);

const {id, title: content} = post1;
console.log(id, content);

const {description = 'Nothing is better than leaving the description empty.'} = post1;

console.log(id, content, description);