Voordat u zich zorgen zou beginnen maken over de vernietiging van de wereld door een uit de hand gelopen neuraal netwerk… dit gaat over iets totaal anders. Maar wat houdt destructuring nu precies in?

De destructuring assignment syntax is een JavaScript expressie die het mogelijk maakt om waardes van een array of eigenschappen van een object uit te pakken in verschillende variabelen.

 

Array destructuring vs. object destructuring

Er bestaan tegenwoordig twee types van destructuring:

Als eerste is er array destructuring.
Dat laat u toe om elke waarde in een array toe te kennen aan zijn eigen variabele. Sinds de introductie van de spread operator, is het vrij eenvoudig om een array op te splitsen in waardes die relevant zijn voor een gebruiker.

Vervolgens bestaat er ook object destructuring. Die feature is veel krachtiger dan array destructuring.

Array destructuring is grotendeels gebaseerd op de locatie van de elementen in de array zoals af te leiden is uit voorbeeld 1. Dat lijkt ook het geval voor object destructuring in codevoorbeeld 2. Maar er zit toch een klein addertje onder het gras verstopt.

Voorbeeld 1: Array destructuring

In voorbeeld 2 is met behulp van de constante “leeftijd” de waarde van het veld “leeftijd” van het object “hond” geëxtraheerd. Omdat de naam van de constante en het veld gelijk zijn, kon een shorthand gebruikt worden. Voorbeeld 3 toont aan dat de constante “naamVanHond” de waarde van het veld “naam” van het object “hond” bevat. Dankzij de rest operator voor objecten bevat de constante “andere” de overige eigenschappen van het door middel van de spread operator gedestructureerde object “hond”. Dat is dus een zeer nuttige aanvulling op de JavaScript syntax. 

Voorbeeld 2: Object destructuring

Voorbeeld 3: Object destructuring + spread operator

Use cases

Om de lezer van deze blogpost een beetje meer op weg te helpen en omdat mensen het best leren van voorbeelden, het zogenaamde learning by example, worden hieronder nog enkele use cases beschreven over destructuring en de spread operator.   

Het kopiëren van een object

Als de waarde van een veld wijzigt op een kopie van een ander object zonder het principe van destructuring daarop toe te passen, worden zowel het oude als het nieuwe object aangepast. (voorbeeld 4: kopie zonder destructuring)

Toch blijft de referentie in het geheugen wel wijzen naar hetzelfde object. Daardoor zijn die objecten gelijk, wat verwacht gedrag is.

Voorbeeld 4: Kopie zonder destructuring

Voorbeeld 5: Kopie met destructuring + spread operator

Wanneer destructuring en de spread operator gebruikt worden om een nieuw object te creëren verandert elk object afzonderlijk en is het nieuwe object een ander object. Dat is dus een goede manier om een gelijkaardig object te creëren. In sommige frameworks zoals Angular is dat dan ook een veelgebruikte feature.
Een voorbeeld van hoe die feature in Angular gebruikt zou kunnen worden, is door het aanpassen van een bestaand object. Daardoor wordt er een nieuw object als output doorgestuurd naar een bovenliggende component, wat bovendien ook zeer leesbaar is.

Waar wel voor opgepast moet worden, is dat de spread operator geen deep copy creëert. De waardes blijven referenties en zijn geen nieuwe instanties, maar daarop biedt cloneDeep van lodash een gepast antwoord. (https://lodash.com/docs/4.17.11#cloneDeep)

Voorbeeld 6: Referentie wijzigen in Angular met behulp van spread operator

Function Parameter Destructuring

De function parameter destructuring bouwt verder op dat wat in het vorige deel van de blogpost al besproken is en is vooral handig voor grote objecten. In de plaats van eigenschappen van een object toe te moeten kennen aan een variabele in het begin van een functie kan dit rechtstreeks gebeuren door gebruik te maken van destructuring.

Voorbeeld 7: Function parameter destructuring

Conclusie

Destructuring is al beschikbaar sinds ES6, maar de achterliggende werking is voor veel ontwikkelaars nog niet volledig duidelijk en jammer genoeg bestaat er nog geen vergelijkbare syntax voor Java.

In het algemeen zijn destructuring en de spread operator zeer handige features om eigenschappen van een object uit te pakken in verschillende variabelen en sta ik zeker achter het gebruik van die features. Met deze blogpost hoop ik dus wat licht te scheppen in de duisternis rond destructuring.

Meer info over de nieuwste versies van JavaScript? => Check een Devoxx talk of het boek van Venkat Subramaniam.

 

Dieter Jordens

Dieter Jordens

Java Software Crafter

Dieter Jordens (26) behaalde een master Burgerlijk Ingenieur aan de KU Leuven met als afstudeerrichting “Artificial Intelligence”. Momenteel is Dieter aan de slag bij FOD Justitie waar hij meehelpt aan de ontwikkeling van een uitdagende applicatie voor de verwerking en opslag van documenten. Hier werkt hij dagelijks met de laatste versies van state of the art technologieën zoals Angular, CouchDB, Elasticsearch, Java en Spring. Dieter is een gepassioneerd agile software developer met een sterke interesse in Artificiële Intelligentie.

Nieuwsbrief

 

Regelmatig organiseren wij workshops en kennissessies en nodigen we interessante sprekers uit.

Wil je op de hoogte gehouden worden? Schrijf je dan zeker in via dit formulier.

Bedankt voor je registratie!

Pin It on Pinterest

Shares
Share This