JavaScript voor mensen, hobbits en elven - Deel 13: Lijstjes met labels

“De associatieve array legt de basis voor object kennis.”
                                                                                    - Sam Rain

Genummerde lijstjes zijn heel praktisch, maar nummers zijn soms behoorlijk plastisch; JavaScript is gelukkig één van de slimmere jongetjes uit de klas van tovenaarstalen – met een beetje Elvenmagie leert een Hobbit in een huppel de kracht van ‘associatieve arrays’ (oftewel tekstuele lijstjes).

Een ‘associatieve array’ is niet een ‘ander’ datatype als de genummerde lijst; alle lijstjes in JavaScript kunnen associatief zijn en allen zijn in feite genummerde lijstjes! Door tekst te gebruiken in plaats van nummers in de ‘index’ (het getal of de waarde tussen de vierkante haakjes), hoef je als hobbit minder te onthouden, zoals de volgorde van elementen in een lijstje. Kijk een naar de volgende twee voorbeelden:

Voorbeeld A                                                            Voorbeeld B
var hobbits = new Array ();                                    var hobbits = new Array ();
hobbits[0] = “tenger”;                                                hobbits[“Frodo”] = “tenger”;
hobbits[1] = “volslank”;                                    hobbits[“Sam”] = “volslank”;
hobbits[2] = “atlethisch”;                                    hobbits[“Pippin”] = “atlethisch”;
hobbits[3] = “tenger”;                                                hobbits[“Merrin”] = “tenger”;

De ‘associatieve array’ is voorbeeld B; het is voor de ongetrainde hobbit meteen te zien welke in dit geval het handigst en meest duidelijk is. Vooral wanneer lijstjes langer worden en er bewerkingen mee gedaan worden op object niveau, gaat de ijverige elf ze steeds meer waarderen. Het mooie aan ‘associatieve arrays’ zijn dat ze nog steeds nummering aanhouden; in voorbeeld B geeft de expressie ‘hobbits[0]’ nog gewoon “tenger” terug – terwijl in voorbeeld A ‘hobbits [“Frodo”] een nieuw element aanmaakt!

Een ‘associatieve array’ wordt vanwege deze magische eigenschap vaak ook een ‘sleutelwaarde’ structuur genoemd (Orcs grommen het in het Orcisch als ‘key-value’). Dit wil eigenlijk zeggen dat een ‘associatieve array’ werkt als een soort woordenboek – bij het opvragen van een ‘term’ (de sleutel), vindt JavaScript de bijhorende, beschrijvende ‘tekst’ (de waarde). Dit is niet alleen enorm handig voor het geheugen van de hobbit, maar ook om allerlei mooie Elvenspreuken te gebruiken!

Als we eens kijken naar de ‘boogkunde’ van Legolas, ontdekken we dat hij drie soorten pijlen heeft – één voor korte afstand, één voor middellange afstand en één voor lange afstand. Iedere pijlsoort heeft gekleurde veren, zodat hij ze gemakkelijk kan herkennen. Wanneer we een ‘associatieve array’ ontwerpen in JavaScript, waarbij de veerkleur de ‘sleutel’ is en de afstand in meters als ‘waarde’, komen we al snel op de volgende magie:

var pijlenkoker = new Array ();
pijlenkoker[“groen”] = 10;
pijlenkoker[“geel”] = 25;
pijlenkoker[“rood”] = 50;

Met de volgende functie:

function schietPijl(kleur) {
var doelwit = “de pijl kwam” + pijlenkoker[kleur] + “meter ver.”;
return doelwit;
}

Zou de volgende spreuk:

var c = schietPijl(“rood”);

in de variabele ‘c’ de volgende tekst opslaan:

“de pijl kwam 50 meter ver.”

Objecten in JavaScript werken als ‘associatieve arrays’ – het zijn simpelweg lijstjes die objecten bevatten die aangeroepen kunnen worden met behulp van een ‘label’ of nummer!

Meer lezen over Programmeren? Klik hier voor de inhoudsopgave van alle artikelen!

©SamRain
JavaScript - 13