Apa itu hoisting?

Question

Apa itu hoisting?

Accepted Answer

**Hoisting** is JavaScript's behavior of moving **declarations** to the top of their scope during the compile phase, before any code runs. But *how* a thing is hoisted differs by declaration type.

```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`**: declaration hoisted and initialized to `undefined`. So reading it early gives `undefined`, not an error.
- **`function` declarations**: fully hoisted — you can call them before their definition line.
- **`let` / `const`**: hoisted but **not initialized**. They sit in the *Temporal Dead Zone* (TDZ) from the start of the block until their declaration line; accessing them in the TDZ throws a `ReferenceError`.
- **Function expressions** (`const f = () => {}`) are *not* callable early — only the `const`/`var` binding is hoisted, not the function.

## Mengapa ini penting

Hoisting explains "why is this `undefined`?" and "why does calling this function before its definition work?" The TDZ for `let`/`const` is actually a *feature* — it turns silent `undefined` bugs into loud errors, encouraging you to declare before use.