Hoisting

Hoisting betekend dat functies (met een naam, dus geen anonieme functies) en variabelen naar de bovenkant van de code ge-hoist worden tijdens het compilen van de code. Declaraties worden naar de bovenkant van de scope verplaatst. Hierdoor kan een variabele gedeclareerd voordat je deze gebruikt.

Normaal declareer je een variabele, om ze te gebruiken roep je functies na deze gedeclareerd te hebben maar met hoisting hoeft dit niet. Met een global scope kun je de variabele altijd aanroepen.

Variable hoisting

a = 10; // Assign 10 to a

element = document.getElementById("demo"); // Find an element 
elem.innerHTML = a;                     // Display a in the element

var a; // Declare a
var a; // Declare a
a = 10; // Assign 10 to a
elem = document.getElementById("demo"); // Find an element 
elem.innerHTML = a; 

Hoisting verplaatst standaard alle declaraties naar boven.

Function hoisting

Het is bijna hetzelfde als variabelen hoisting, het verplaatst de variablen naar boven in de code bij het compilen.

let a = 10,
    b = 20;

let result = add(a,b);
console.log(result);

function add(c, d){
return c + d;

In dit voorbeeld hebben we de functie add () aangeroepen voordat we deze definieerden.

Er is vaak geen reden om alles boven de declaraties te hoisten. Dit kost meer ruimte voor de browser omdat deze dan eerst door alle functions heen zou moeten gaan.

Bronnen:

Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms | MDN. (2021, 19 februari). MDN. https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

Dani Krossing. (2018b, juni 4). 18: Hoisting in JavaScript Explained | What is Hoisting in JavaScript | JavaScript Tutorial. YouTube. https://www.youtube.com/watch?v=ppMlvGMT2qE