Destructuring

Question 1

Wat is destructuring?

Answer 1

Destructuring is een manier om waarden uit een object of uit een array te halen en ze meteen op te slaan in variabelen.

Question 2

Stel dat we het volgende object hebben:

const person = {
firstName: ‘Jimmy’,
lastName: ‘Da Silva’,
dateOfBirth: ‘08/02/1991’,
}

Laat zien hoe je destructuring zou toepassen op dit object indien je enkel de voornaam en geboortedatum nodig hebt.

Answer 2

const { dateOfBirth, firstName } = person;

Merk op dat:

• De variabelen die we gebruiken om een object te destructureren moeten dezelfde namen hebben als de keys van het object waarvan we de waarde willen opslaan in de variabele.
• De volgorde van de variabelen niet dezelfde moet zijn als de volgorde waarin ze voorkomen in het object zelf. Bij destructureren van arrays is de orde wel van belang.

Question 3

We weten dat bij destructuring van objecten, de namen van de variabelen dezelfde moeten zijn als de namen van de keys van het object waarop destructuring wordt toegepast.

Indien we toch nieuwe namen willen gebruiken voor de variabelen, hoe doen we dit dan?

Answer 3

const { naam-van-eigenschap : nieuwe-naam } = obj;

Question 4

Hoe kunnen we default waarden geven aan de variabelen die we gebruiken voor destructuring van een object?

Answer 4

const { naam-van-eigenschap = devault-waarde } = obj;

Question 5

Hoe kan je bij destructuring van een object de naam van de variabelen veranderen en ze tegelijkertijd een default waarde meegeven?

Answer 5

const { naam-van-eigenschap: nieuwe-naam = devault-waarde } = obj;

Question 6

Stel we hebben de volgende code:

let a = 55;
let b = 87;

const obj = {
a: 25,
b: 66
}

1. Geef de output (en verklaring) voor de volgende regel:
   let { a, b } = obj;
2. Geef de output (en verklaring) voor de volgende regel:
   { a, b } = obj;
3. Wat gebeurt er in de volgdende regel:
   ({ a, b } = obj);

Answer 6

1. Omdat a en b al gedeclareerd zijn zal er een foutmelding worden gegeven.
2. Ook dit geeft een foutmelding omdat javascript {a, b} zal interpreteren als een codeblok. omdat het in javascript niet mogelijk is om een waarde toe te kennen aan een codeblok zal er daarom ook een foutmelding worden weergegeven.
3. Hier zal het object gedestructureert worden en zullen de waarden a en b overschreven worden.

Question 7

Gegevenis het volgende geneste object:

const obj1 = {
obj2: {
obj3: {
a: 12,
b: 22,
},
},
};

Hoe moet je destructuring toepassen indien je de waarden a en b wilt opslaan in variabelen?

Answer 7

const {
obj2: {
obj3: { a, b },
},
} = obj1;

Question 8

Soms is het zo dat we functies (of methoden) hebben met enorm veel parameters. Wanneer we deze functies oproepen is het dan moeilijk om de volgorde waarin te parameters moeten worden opgeroepen te herinneren. Hoe kan destructuring ervoor zorgen dat de volgorde waarin argumenten worden meegegeven niet meer van belang is?

Answer 8

Indien bij een functie oproep, De argumenten zouden geëncapsuleerd worden in een object, die dan in de body van de functie worden gedestructureerd, dan is het niet meer nodig om de argumenten mee te geven in de volgorde waarin ze zijn gedefinieerd.

Question 9

Gegeven:

const arr = [2, 3, 4];

Hoe destructureer je deze array zodanig dat:

1. a = 2, b = 3, c = 4;
2. a = 2, b = 4 (c hoeft dus niet gedefinieerd te worden)

Answer 9

1. const [a, b, c] = arr;
2. const [a, , b] = arr;

Question 10

Gegeven:

const arr = [2, 3, 4];
let [a, b] = arr; // a = 2, b = 3

Hoe kan je aan de hand van destructurering de waarden voor a en b wisselen (dus a = 3 en b = 2)?

Answer 10

[a, b] = [b, a];