Wat is hoisting?

Question

Wat is hoisting?

Accepted Answer

**Hoisting** is het gedrag van JavaScript waarbij **declaraties** naar de bovenkant van hun scope worden verplaatst tijdens de compile-fase, voordat er code wordt uitgevoerd. Maar *hoe* iets wordt gehoisted verschilt per declaratietype.

```js
console.log(a); // undefined  — `var a` is hoisted & initialized to undefined
var a = 1;

foo();          // "works!" — function declarations are fully hoisted
function foo() { console.log("works!"); }

console.log(b); // ❌ ReferenceError — temporal dead zone
let b = 2;
```

## Wat wordt gehoisted, en hoe

- **`var`**: declaratie gehoisted en geïnitialiseerd naar `undefined`. Dus het vroeg uitlezen geeft `undefined`, geen fout.
- **`function` declaraties**: volledig gehoisted — je kunt ze aanroepen voordat hun definitieregel staat.
- **`let` / `const`**: gehoisted maar **niet geïnitialiseerd**. Ze zitten in de *Temporal Dead Zone* (TDZ) van het begin van het blok tot hun declaratieregel; ernaartoe toegang in de TDZ werpt een `ReferenceError`.
- **Function expressions** (`const f = () => {}`) zijn niet vroeg aanroepbaar — alleen de `const`/`var` binding is gehoisted, niet de functie zelf.

## Waarom het belangrijk is

Hoisting verklaart "waarom is dit `undefined`?" en "waarom werkt het aanroepen van deze functie voordat deze is gedefinieerd?" De TDZ voor `let`/`const` is eigenlijk een *feature* — het verandert stille `undefined` bugs in luide fouten, wat je aanmoedigt voordat je gebruikt te declareren.