Apakah hoisting?

Question

Apakah hoisting?

Accepted Answer

**Hoisting** adalah tingkah laku JavaScript yang memindahkan **declarations** ke bagian atas scope mereka selama fase compile, sebelum kode apa pun dijalankan. Tetapi *bagaimana* sesuatu di-hoist berbeda menurut jenis deklarasi.

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

## Apa yang di-hoist, dan bagaimana

- **`var`**: deklarasi di-hoist dan diinisialisasi ke `undefined`. Jadi membacanya di awal memberikan `undefined`, bukan error.
- **`function` declarations**: sepenuhnya di-hoist — Anda dapat memanggilnya sebelum baris definisinya.
- **`let` / `const`**: di-hoist tetapi **tidak diinisialisasi**. Mereka berada di *Temporal Dead Zone* (TDZ) dari awal blok hingga baris deklarasi mereka; mengaksesnya di TDZ melempar `ReferenceError`.
- **Function expressions** (`const f = () => {}`) tidak dapat dipanggil di awal — hanya binding `const`/`var` yang di-hoist, bukan fungsinya.

## Mengapa itu penting

Hoisting menjelaskan "mengapa ini `undefined`?" dan "mengapa memanggil fungsi ini sebelum definisinya berhasil?" TDZ untuk `let`/`const` sebenarnya adalah *feature* — mengubah silent `undefined` bugs menjadi loud errors, mendorong Anda mendeklarasikan sebelum menggunakan.