Dave van Hoorn
Front-End Developer

Destructuring in JavaScript, zo werkt het

JavaScript destructuring is een makkelijke en snelle manier om variabelen aan te maken. De waarden van de gemaakte variabelen komen uit de values in een array of properties in een object. Het voordeel van destructuring is efficiënte en leesbare code 👍🏻

Laten we beginnen met een eenvoudig object. In het script gaan we de destructuring syntax gebruiken om waarden uit het object op te slaan in variabelen. Het object ziet er zo uit:

1
2
3
4
5
const persoon = {
  voornaam: "Dave",
  achternaam: "van Hoorn",
  telefoonnummer: 0616910079,
}

Een voorbeeld zonder object destructuring

Zonder object destructuring kunnen we variabelen aanmaken door de naam van het object te schrijven, er een punt achter te zetten en vervolgens de eigenschap van het object te schrijven. Zie regel 8 en regel 9:

1
2
3
4
5
6
7
8
9
10
11
12
const persoon = {
  voornaam: "Dave",
  achternaam: "van Hoorn",
  telefoonnummer: 0616910079,
}

// Zonder object destructuring
const voornaam = persoon.voornaam
const telefoonnummer = persoon.telefoonnummer

console.log(voornaam) // Dave
console.log(telefoonnummer) // 0616910079

Een voorbeeld met object destructuring

Door object destructuring toe te passen kunnen we eenvoudiger variabelen aanmaken. Kijk eens naar het voorbeeld op regel 8:

1
2
3
4
5
6
7
8
9
10
11
const persoon = {
  voornaam: "Dave",
  achternaam: "van Hoorn",
  telefoonnummer: 0616910079,
}

// Met object destructuring
const { voornaam, telefoonnummer } = persoon

console.log(voornaam) // Dave
console.log(telefoonnummer) // 0616910079

Met object destructuring kunnen we dus de waarde van een specifieke eigenschap in een object opslaan in een variabele. Het is belangrijk om te weten dat we met object destructuring zoeken naar de naam van de eigenschap. In ons voorbeeld kunnen we dus de eigenschappen voornaam, achternaam en telefoonnummer opslaan in variabelen.

Let op! Je bent niet verplicht om alle eigenschappen te gebruiken. In het bovenstaande voorbeeld hebben we op regel 8 de tweede eigenschap binnen het object overgeslagen (telefoonnummer), en het werkt nog naar verwachting.

Een voorbeeld van array destructuring

Destructuring kunnen we toepassen op JavaScript Arrays en JavaScript Objecten. De syntax voor zonder array destructuring ziet er zo uit:

1
2
3
4
5
6
const merken = ["Alfa Romeo", "Audi", "BMW", "Chrysler", "Honda"]

// Zonder array destructuring
const merk = merken[0]

console.log(merk) // "Alfa Romeo"

De syntax mét array destructuring ziet er zo uit:

1
2
3
4
5
6
const merken = ["Alfa Romeo", "Audi", "BMW", "Chrysler", "Honda"]

// Met array destructuring
const [merk] = merken

console.log(merk) // "Alfa Romeo"

Het pakken van de eerste waarde uit de array is zoals hierboven te zien eenvoudig, maar stel dat we niet de string Alfa Romeo, maar de string BMW uit de array willen halen. Deze waarde staat in de tweede key van de merken array (merken[2]), maar we kunnen geen index meegeven in de destructuring syntax. Daarom moeten we handmatig tellen en de 'ongebruikte' keys vervangen met een spatie:

1
2
3
4
5
6
const merken = ["Alfa Romeo", "Audi", "BMW", "Chrysler", "Honda"]

// De derde waarde van de array ("BMW") opslaan in variabele "merk"
const [, , merk] = merken

console.log(merk) // "BMW"

Een combinatie van array en object destructuring op een array of objects

Een van de meest gebruikte datatypes in JavaScript is een array of objects. Stel dat we moeten werken met het volgende complexe object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const personen = [
  {
    voornaam: "Dave",
    achternaam: "van Hoorn",
    telefoonnummer: 0616910079,
    rekeningen: {
      ing: "NL69INGB0123456789",
      rabobank: "NL44RABO0123456789",
      abnamro: "NL02ABNA0123456789", 
    }
  },
  {
    voornaam: "John",
    achternaam: "van Hoorn",
    telefoonnummer: 0627700071,
    rekeningen: {
      ing: "NL69INGB1123456789",
      snsbank: "NL12SNSB0123456789"
    }
  }
]

Als we van de personen Dave en John specifiek de ING rekening willen hebben, dan kunnen we het volgende schrijven om de rekeningnummers op te slaan in twee variabelen: ingRekeningDave en ingRekeningJohn:

1
2
3
4
5
6
7
8
9
10
11
12
// Een combinatie van array en object destructuring
const [
  {
    rekeningen: { ing: ingRekeningDave },
  },
  {
    rekeningen: { ing: ingRekeningJohn },
  },
] = personen

console.log(ingRekeningDave) // NL69INGB0123456789
console.log(ingReningJohn) // NL69INGB1123456789

Vragen?