29-09-2019
Javascript - Hoisting
Hijsen maar
In javascript kan je variabelen alleen gebruiken als je ze gedeclareerd hebt. Zelfs voordat je ze gedeclareerd hebt in sommige gevallen. Maar...wat betekent dat eigenlijk?
Declaratie en initialisatie
Als je een variabele een waarde wil geven, moet je hem ergens declareren. Dit betekent dat je een geheugenplek vrij maakt waar die waarde in gezet kan worden. Tevens geeft javascript er de initiële waarde van undefined aan. Dus als je hem logt, dan staat er "undefined".
var naam; //Declareert de variabele.
console.log(naam); //logt: undefined.
Je hebt dan de mogelijkheid om er waarden aan toe te wijzen en ze te gebruiken zoals bijvoorbeeld hieronder:
naam = 'Bertje';
//Logt: Mijn naam is Bertje
console.log('Mijn naam is '+naam);
Vaak doen we het declareren en er een waarde aan geven op 1 en dezelfde regel. Dat maakt in dit geval geen verschil. En dat ziet er dan zo uit:
var naam = 'Bertje';
Als je een variabele gebruikt zonder hem te declareren, crashed javascript met een ReferenceError. Je script stopt simpelweg als je de fout niet afvangt.
console.log(bestaatniet);
//Onderstaande regel zal nooit worden uitgevoerd omdat
//bovenstaande regel het script crashed met de fout:
//ReferenceError: bestaatniet is not defined
console.log('Hallo');
Gebruik vóór declaratie
Bekijk dit stukje code eens. Je zou verwachten dat het niet zou werken, omdat we eerst de naam loggen, terwijl deze nog niet gedeclareerd is nietwaar? En javascript voert immers de code van boven naar beneden, lijn voor lijn uit.
console.log('Mijn naam is '+naam);
var naam = 'Bertje';
Het bijzonder is, dat dit ongeveer werkt. De code logt "Mijn naam is undefined". Dit omdat voordat de code uitgevoerd word, alle declaraties omhoog gehesen worden. De code functioneert dan alsof je hem zo hebt geschreven:
var naam;
console.log('Mijn naam is '+naam);
naam = 'Bertje';
Hetzelfde geldt voor functies. Dit:
whatTimeIsIt();
function whatTimeIsIt()
{
var date = new Date();
console.log('Het is '+date.getHours()+':'+date.getMinutes());
}
Is alsof dit is geschreven:
function whatTimeIsIt()
{
var date = new Date();
console.log('Het is '+date.getHours()+':'+date.getMinutes());
}
whatTimeIsIt();
Opgepast met let en const
In ES6, versie 6 van ECMA Script, de gestandaardiseerde naam van Javascript, hebben we beschikking gekregen tot de extra statements let en const. Ik ga hier niet op in waar ze precies voor dienen omdat dit buiten de scope van dit artikel valt, maar belangrijk om te weten is dat deze niet omhoog worden gehesen. Dus dit werkt niet:
console.log('Mijn naam is '+naam); //ReferenceError: naam is not defined
let naam = 'Bertje';
Hetzelfde geldt voor const