Array destructuring werkt als volgt:

[ variable1, variable2, ..., variableN ] = array;

Open de file /06.destructuring/array-destructuring.html in de editor. Open dezelfde file in Chrome. Open de Chrome dev tools mbv Ctrl+Shift+I. Refresh de pagina, en kijk naar de console in de Chrome dev tools. Als het goed is zie je de volgende fout: Uncaught ReferenceError: m2 is not defined.

Klopt helemaal, m2 is ook undefined, maar we gebruiken m2 wel in een vergelijking. Ga naar het bestand in jouw favoriete editor.

In ES5 doen we variabele toekenning op de volgende manier:

var m1 = 3, d1 = 14, y1 = 1977;

Probeer dmv array destructuring de variabelen m2, d2 en y2 toe te kennen zodat ze dezelfde waarde bevatten als m1, d1 en y1. We geven een kleine hint:

var ..... = [3, 14, 1977];

Niet alle waarden in een array hoef je toe te kennen. Je kunt een aantal over slaan. Dit kun je doen door geen variabele op te geven voor toekenning:

var [a1,,a3] = [1,2,3];

Open het bestand /06.destructuring/array-destructuring-skip.html. Je ziet hier de regel:

var [,,,,,,,,] = [1,2,3,4,5,6,7,8,9];

Zet a en b op de juiste plek.

Objecten kunnen we ook 'destructuren' (is dat een woord?).

Bekijk het voorbeeld in het bestand (in de browser en favo editor) /06.destructuring/array-destructuring-objecten.html:

let sophie = { naam: 'Sophie' }
let nina = { naam: 'Nina' }

let {naam: naamSophie} = sophie;
let {naam: naamNina} = nina;

console.log(naamSophie);
console.log(naamNina);

Wat zou de output in de console kunnen zijn?

Verder kunnen we de objecten ook diep destructuren (gebruiken we het weer :)).

Voor het volgende voorbeeld welke ook in het bestand /06.destructuring/array-destructuring-objecten.html uitgewerkt is willen we graag de variabelen voornaam, geboorteDag en geboorteJaar destructuren. Werk de opdracht uit.