Afgelopen week was ik bezig met een project in het javascript framework Nuxt.js. Zo was ik bezig met het maken van een lijst van automerken. Echter lukte het mij niet om deze lijst op te bouwen met mijn kennis van PHP-arrays. Simpel gezegd werken arrays in Javascript heel anders dan in PHP. Voor mensen die zich nu afvragen wat een array is, zal ik dit even kort verduidelijken. Een array is een lijst van waardes. [1,2,3]. Als PHP-ontwikkelaar weet ik niet anders dan dat ik een array kan opbouwen op de volgende manier:
$arr = [];
$arr[‘key’] = $value;
Echter liep ik tegen het probleem aan dat wanneer ik ditzelfde met javascript wilde doen dat ‘key’ word vervangen met 0. Simpel gezegd ik was de ‘key’ kwijt. Niet heel erg handig.
let arr = [];
arr[‘key’] = value; // arr[0] = value
Echter het werd nog leuker. Op het moment dat de key een nummer is. Laten we zeggen het getal 2 dan word er een array aangemaakt met 0,1,2. Waarbij 0 en 1 de waarde undefined bevat.
let arr = [];
arr[2] = value; // arr[0] = undefined; arr[1] = undefined; arr[2] = value.
Als PHP-ontwikkelaar vroeg ik me dan gelijk af waar 0 en 1 vandaag komen, ik heb deze posities namelijk niet opgegeven. Dit is allemaal onlogisch.
Wat blijkt dat wanneer een array word opgebouwd in Javascript dat wanneer ik een key meegeef dat ik de positie van mijn waarde opgeef. Geef ik als key het getal 2 op dan wijs ik plek drie toe voor mijn waarde binnen de lijst.
Let arr = [];
arr[0] = undefined
arr[1] = undefined
arr[2] = value;
Nu hoor ik jouw als javascript ontwikkelaar al gelijk denken van waarom maak je geen gebruik van objecten. Reden hiervoor is simpel. PHP werkt niet met objecten voor het opslaan een data structuur, hierdoor is dit voor mij onbekend terrein. Maar toch maar eens eventjes proberen of ik mijn $arr[‘key’] = $value; aan de praat kan krijgen met een object in javascript.
Let arr = {}
arr[2] = value; // arr[2] = value
En ja hoor dit werk!
De logica waarom dit wel werkt, ontgaat mij als PHP-ontwikkelaar volkomen. Maar het lijkt er op dat objecten in javascript wel ondersteuning bieden voor key => value waar dit met een array niet werkt. Ik wil nu eigenlijk niet weten hoe dit in andere programmeertalen werkt.
Tip vanuit mijn kant gebruik javascript objecten als je een array opbouwt met een key => value