hoisting

Hoisting

Wat is hoisting?

Hoisting in JavaScript zorgt er voor dat al de variabelen die worden gedeclareerd automatisch bovenaan in hun respectievelijke scope worden neergezet. Dus wanneer een variabele in de global scope wordt gedefinieerd wordt hij automatisch bovenaan deze scope neergezet. Staat een variabele in een function scope? Dan wordt hij hier bovenaan gezet in de function scope etc. Het gevolg hiervan is dat variabelen in JavaScript gebruikt kunnen worden voordat ze worden gedefinieerd. Hieronder staat een voorbeeld van dit principe.

a = 0;

console.log(a); //In de console: 0

a++;

console.log(a); //In de console: 1

var a;

Zoals je hier ziet wordt wordt variabele a voordat hij wordt gedefinieerd al gebruikt. Let ook op dat de volgorde van de rest van de code nog wel van boven naar beneden verloopt. Er zal in dit geval dus eerst 0 in de console verschijnen en daarna pas 1. Als het ware wordt de code dus getransformeerd naar het volgende voorbeeld.

var a;

a = 0;

console.log(a); //In de console: 0

a++;

console.log(a); //In de console: 1

Het is ook belangrijk om te weten dat initialisaties niet worden gehost. Zoals in het voorbeeld hieronder te zien is wordt alleen de toegekende waarde van variabele a weergegeven.

a = 10;

console.log(a); //In de console: 10

console.log(b); //In de console: undefined

b = 5;

var a;
var b;

Functies

Hoisting werkt zoals in het onderstaande voorbeeld ook met functies. De functie wordt hier aangeroepen voordat hij wordt gedefinieerd, zonder dat er een error plaatsvindt.

functionHoisting("test");

function functionHoisting(string) {
  console.log(string); //In de console: test
}

Net als bij var worden functies bovenaan hun respectievelijke scope gezet. In het onderstaande voorbeeld wordt de functie functionHoisting() bovenaan de functie superFunctionHoisting() gezet, dit is immers zijn function scope.

superFunctionHoisting("test");

function superFunctionHoisting(string) {
  functionHoisting(string);

  function functionHoisting(string) {
    console.log(string); //In de console: test
  }
}

Hoisting met let en const

In deze voorbeelden maakte ik telkens gebruik van var of een functie, voor let en const werkt het principe hoisting echter anders. let en const worden beide wel naar boven gehaald, maar ze worden niet geïnstalleerd. Dit gebeurt pas wanneer de declaratie van de variabele wordt toegevoegd. let en const zitten dan als het ware in een soort van limbo. Het volgende voorbeeld geeft dit voor let goed weer.

a = 0;
let a;

Deze code geeft de volgende reference error. Het gebruik van een const variable voordat hij is gedeclareerd geeft zelfs een syntax error. Het volgende voorbeeld draait dus helemaal niet.

a = 0;
const a;

Waar moet je variabelen dan declareren?

Ondanks het begrip hoisting is het nog steeds het verstandigste om variabelen bovenaan hun respectievelijke scope te declareren. Dit maakt je code leesbaarder en makkelijker te begrijpen. Het is immers het standaard gedrag van JavaScript, dus wie zijn wij dan om daarvan af te wijken?

Bronnen:

• W3School. (z.d.). JavaScript Hoisting. Geraadpleegd op 19 mei 2021, van https://www.w3schools.com/js/js_hoisting.asp
• MDN Web Docs. (2021, 28 april). Hoisting. Geraadpleegd op 19 mei 2021, van https://developer.mozilla.org/en-US/docs/Glossary/Hoisting?retiredLocale=nl