Hoisting là gì?

Question

Hoisting là gì?

Accepted Answer

**Hoisting** là hành vi của JavaScript khi di chuyển các **khai báo** lên đầu scope của chúng trong giai đoạn biên dịch, trước khi bất kỳ code nào chạy. Nhưng *cách* một thứ được hoist khác nhau tùy theo loại khai báo.

```js
console.log(a); // undefined  — `var a` được hoist & khởi tạo thành undefined
var a = 1;

foo();          // "works!" — function declaration được hoist hoàn toàn
function foo() { console.log("works!"); }

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

## Cái gì được hoist, và như thế nào

- **`var`**: khai báo được hoist và khởi tạo thành `undefined`. Vì vậy đọc nó sớm sẽ cho `undefined`, không phải lỗi.
- **Khai báo `function`**: được hoist hoàn toàn — bạn có thể gọi chúng trước dòng định nghĩa.
- **`let` / `const`**: được hoist nhưng **không được khởi tạo**. Chúng nằm trong *Temporal Dead Zone* (TDZ) từ đầu khối cho đến dòng khai báo; truy cập chúng trong TDZ sẽ ném ra `ReferenceError`.
- **Function expression** (`const f = () => {}`) *không* gọi được sớm — chỉ binding `const`/`var` được hoist, không phải hàm.

## Tại sao điều này quan trọng

Hoisting giải thích "vì sao cái này lại là `undefined`?" và "vì sao gọi hàm này trước định nghĩa của nó lại được?" TDZ cho `let`/`const` thực ra là một *tính năng* — nó biến những lỗi `undefined` âm thầm thành những lỗi rõ ràng, khuyến khích bạn khai báo trước khi dùng.