Co to jest hoisting?

Question

Accepted Answer

**Hoisting** to zachowanie JavaScript'u, które przenosi **deklaracje** na górę ich zakresu podczas fazy kompilacji, przed uruchomieniem jakiegokolwiek kodu. Jednak *sposób*, w jaki coś jest hoistowane, różni się w zależności od typu deklaracji.

```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;
```

## Dlaczego to ważne

- **`var`**: deklaracja jest hoistowana i zainicjowana na `undefined`. Więc czytanie jej wcześnie daje `undefined`, a nie błąd.
- **Deklaracje `function`**: w pełni hoistowane — możesz je wywoływać przed linią ich definicji.
- **`let` / `const`**: hoistowane, ale **nie zainicjowane**. Znajdują się w *Temporal Dead Zone* (TDZ) od początku bloku do linii ich deklaracji; dostęp do nich w TDZ wyrzuca `ReferenceError`.
- **Wyrażenia funkcji** (`const f = () => {}`) *nie* są wywoływalne wcześnie — tylko wiązanie `const`/`var` jest hoistowane, a nie funkcja.

## Dlaczego to ważne

Hoisting wyjaśnia "dlaczego to jest `undefined`?" i "dlaczego wywoływanie tej funkcji przed jej definicją działa?" TDZ dla `let`/`const` to w rzeczywistości *funkcja* — zamienia ciche błędy `undefined` w głośne błędy, zachęcając do deklarowania przed użyciem.