Taulukoiden destrukturointi JavaScriptissä

Tässä oppitunnissa käsittelemme destrukturointia taulukoille. Tämä toiminto on tarkoitettu massana tallentamaan taulukon elementtejä muuttujiin yhdellä koodirivillä.

Toiminnon syntaksi on seuraava:

javascriptlet [muuttuja1, muuttuja2, muuttuja3] = taulukko;

Kuten näet, vasemmalla = -merkin puolella neljässä hakasulkeessa luetellaan muuttujien nimet. Nämä muuttujat julistetaan massana let -avainsanalla, joka sijaitsee ennen avaavaa sulkua.

Toiminnon tuloksena ensimmäiseen muuttujaan tallennetaan taulukon ensimmäinen elementti (eli avaimella nolla), toiseen muuttujaan - toinen, kolmanteen muuttujaan - kolmas.

Katsotaan käytännön esimerkkiä. Oletetaan, että meillä on taulukko, joka sisältää vuoden, kuukauden ja päivän:

javascriptlet arr = [2025, 12, 31];

Tallennetaan vuosi, kuukausi ja päivä vastaaviin muuttujiin käyttäen destrukturointia:

javascriptlet arr = [2025, 12, 31];
let [year, month, day] = arr;

Katsotaan muuttujiemme sisältöä:

javascriptconsole.log(year);  // tulostaa 2025
console.log(month); // tulostaa 12
console.log(day);   // tulostaa 31

Vertailun vuoksi katso, kuinka hankalaksi ja pitkäksi koodi ilman destrukturointia muodostuu:

javascriptlet arr = [2025, 12, 31];

let year  = arr[0];
let month = arr[1];
let day   = arr[2];

console.log(year);  // tulostaa 2025
console.log(month); // tulostaa 12
console.log(day);   // tulostaa 31

javascriptlet arr = ['John', 'Smit', 'development', 'programmer', 2000];

let name       = arr[0];
let surname    = arr[1];
let department = arr[2];
let position   = arr[3];
let salary     = arr[4];