Arrays

We hebben gezien hoe we variabelen declareren en gebruiken. De waarden die we tot hiertoe hebben toegewezen aan deze variabelen waren Nummers, Strings of Booleans. Het is steeds één waarde, nooit meer dan één.

We kunnen ook echter 'Arrays' maken. Dit zijn variabelen die meerdere waarden kunnen bevatten. Met andere woorden, één variabele die meerdere waarden kan bevatten, een lijst van gegevens. De declaratie van zo'n Array is bijna dezelfde als die van variabelen die slechts één waarde kan bevatten.

let multipleValues = [];
//of
let multipleValues = new Array();

Beide statements doen identiek hetzelfde. Ze declareren een variabele en zeggen dat deze variabele een Array zal bevatten. Er zitten echter nog geen waarden in de Array. Hoe doen we dat dan?

Wat van belang is om weten, is dat elke waarde in de Array een positie nummer krijgt, een 'index'. Dit volgnummer begint altijd te tellen met 0. Dus, het eerste item in een Array krijgt positie nummer 0, het tweede item krijgt positie nummer 1 en zo verder. Met dit indexgetal kunnen we de positie van een element binnen de Array aanduiden en aanpassen.

let multipleValues[0] = 100;
let multipleValues[1] = 60;
let multipleValues[2] = "Mouse";

Op deze manier zeggen we dat op positie 0 in de Array multipleValues de waarde 100 moet gezet worden. Op positie 2 staat de String "Mouse". Tegelijk merken we op dat we verschillende soorten waarden in een Array kunnen steken (Numbers, Strings, ...).

Op dezelfde manier, via het indexgetal (volgnummer of positienummer) kunnen we ook terug waarden opvragen uit de Array. Als we de waarde 60 nodig hebben, oftewel de waarde op indexnummer 1, dan:

console.log(multipleValues[1]);

Omdat een Array net zoals een String, een object is, heeft het eigenschappen (properties), informatie over zichzelf, die we kunnen opvragen. Dit doen we door een punt te schrijven achter het object, in dit geval de Array, en daarna de eigenschap die we willen opvragen. We moeten natuurlijk wel het resultaat van deze opvraging laten zien via een console.log().

console.log(multipleValues.length);

Via de eigenschap length (lengte) vragen we hoeveel items er in de Array zitten. Het resultaat is 3. We geven dan wel indexnummers van 0, 1, 2, maar er zijn 3 items in de Array.

En omdat Arrays objecten zijn, hebben ze ook methodes. Dit zijn ingebakken functies in het object die we kunnen gebruiken om bewerkingen op het object te kunnen loslaten. We moeten dus een functioncall maken binnen het object, binnen de Array.

let reverseValues = multipleValues.reverse();

De schrijfwijze is net dezelfde als met de eigenschappen van een object. Behalve dan dat we ronde haken openen en sluiten achter de functioncall. De regel die als voorbeeld dient, zal de volgorde van de gegevens binnen multipleValues omdraaien en die als Array aanbieden aan een nieuwe variabele met de naam reverseValues.

Een ander voorbeeld:

console.log(reverseValue.join());

Dit zijn redelijk simpele voorbeelden. We zullen uitgebreidere voorbeelden zien, met Arrays, wanneer we deze cursus verder zetten. Als je nieuw bent in de programmeer wereld, dan lijken deze Arrays esoterische dingen, vreemde dingen die je misschien liever uit de weg gaat en liever niet gebruikt. Toch zal je merken dat Arrays bijna overal in JavaScript worden gebruikt. Je kan er niet omheen. Het kan zijn dat je ze zal creëren, maar meestal zal je ze krijgen als je iets opvraagt. Je zal er mee moeten leren omgaan. Zo kan het bij voorbeeld zijn dat je wil weten hoeveel anchor tags er bestaan in een pagina, of hoeveel paragrafen er zijn, of hoeveel h3 tags er zijn. Op die momenten krijg je een Array als antwoord.

Wat we kunnen doen is het document.getElementsByTagName() statement uitvoeren. We hebben dit statement nog niet gezien, maar we komen hier zeker later op terug. Dit statement scant je hele HTML-pagina en haalt alle tags op die je wenst. Het resultaat dat je terugkrijgt is een Array die niet alleen je tags opsomt, maar ook de inhoud ervan.