Hoisting

In de Javascript standaard zijn declaratie Hosied, dit betekent dat variabalen en functie boven de top van de scope bevinden, voordat de code wordt uitgevoerd. JavaScript laat namelijk het toe om variabelen tegelijkertijd te kunnen declareren en te initialiseren. De ideale manier voor het declareren en initialiseren van een variabele: var a = 100;

In het eerste voorbeeld zie je dat de variabele x pas aan het einde wordt gedeclareerd en in het tweede voorbeeld wordt dit gelijk in het begin gedaan. Beide voorbeelden geven dezelfde resultaat terug (w3school, 2021).

Voorbeeld Hoisting 1:

x = 5; // x krijgt de waarde 5 toegewezen 

elem = document.getElementById("demo"); // Zoekt een element 
elem.innerHTML = x;                     // Geeft x weer in het element

var x; // x wordt gedeclareerd 
// output 5

Voorbeeld Hoisting 2:

var punt ; // punt wordt gedeclareerd
punt = 5; // krijgt de waarde 5 toegewezen

elem = document.getElementById("demo"); // Zoekt een element 
elem.innerHTML = punt;                     // Geeft punt weer in het element
// output 5

Undefined hoisted

De beste optie zou zijn om de variabele voor gebruik te declareren en te initialiseren, zodat je geen “ongedefineerd” waarde krijgt (Mabishi Wakio, 2020).

Voorbeeld 1 undefined In het volgende voorbeeld zie je dat een variabele var hoist wordt aangemaakt, zonder er een waarde aan meegegeven wordt. Vervolgens wordt deze variabele aangeroepen. Dit geeft als output “undefined”. Omdat er geen waarde aan meegegeven zijn en javascript leest van boven naar beneden. In het laatste regels krijgt de variabele host een waarde mee, helaas heeft de executie al plaatst gevonden.

// voorbeeld 1
var hoist;

// Output: undefined
console.log(hoist); 
 
// JavaScript heeft de variabele declaratie gehesen en krijgt nu de waarde ongedefinieerd.
hoist = 'The variable has been hoisted.'; 

// voorbeeld 2: executie vindt gelijk plaatst
// Output: undefined, omdat er geen variabele declaratie heeft plaatst gevonden boven de executie code
console.log(hoist); 

// JavaScript heeft de variabele declaratie gehesen en krijgt nu de waarde ongedefinieerd.
var hoist = 'The variable has been hoisted.'; 

Variabelen definiëren met let en const

Wanneer je variabelen met let of const gaat definiëren, moet dit op het alle hoogste niveau gedaan worden van een codeblok.

Voorbeeld 1: let Als de variabele let niet op het hoogste niveau staat, komt er als output “RederenceError” uit. Omdat de variabele let niet boven aan staat gedefinieerd en de waarde dat toegewezen is, staat boven aan (dit zou juist anders om moeten). (wikipedia, 2021)

carName = "Volvo";
let carName; // let moet op het hoogste niveau staan, staat momenteel op het laagste niveau

Voorbeeld 2: const Als de variabele const niet op het hoogste niveau staat, zal er een syntax error komen (code wordt vervolgens niet gerund).

// code zal niet runnen, omdat const niet op het hoogste niveau staat
carName = "Volvo";
const carName;

Conclusie:

Het is belangrijk voor developers om te weten wat hoisted in javascript inhoudt. Wanneer dit niet het geval is, zal je als ontwikkelaar veel fouten maken tijdens coderen/ bugs tegenkomen. Om dit te voorkomen, zal je alle variabelen op het hoogste niveau moeten definiëren (var, let, const).

Bronnen

Mabishi Wakio (2020, 21 september). Understanding Hoisting in JavaScript. Geraadpleegd van, https://www.digitalocean.com/community/tutorials/understanding-hoisting-in-javascript w3school (2021). JavaScript hoisting. Geraadpleegd van, https://www.w3schools.com/js/js_hoisting.asp