Hoisting

Duy Văn | 05/02/2025

---

Hoisting là cơ chế mà JS có khi làm việc với khai báo biến

Có hai ví dụ sau:

x = 5;
console.log(x);

var x;

var x;
x = 5;
console.log(x);

Thực tế là cả hai phần code trên đều hoạt động cho cùng một kết quả, lý do là vì cái gọi là hoisting

Hoisting cụ thể là cơ chế đưa toàn bộ các khai báo biến lên trên cùng của scope, nếu scope là function thì đưa lên đàu function, nếu khai báo được đặt ngoài nên scope thì nó được đưa lên đầu file

Đối với hai kiểu khai báo biến let và const thì sẽ có vấn đề với hoisting, nôm na là nếu sử dụng biến được khai báo kiểu này trước khi khai báo thì sẽ lỗi, khác với var

console.log(x);
let x = 5;

Đoạn code trên dính lỗi ReferenceError.

Còn đối với const thì sẽ dính lỗi SyntaxError

Chỉ có khai báo biến được hoist lên đầu scope, còn gán giá trị thì không

var x = 5; 
var y = 7; 
console.log(x+y);

Đoạn code trên sẽ có kết quả khác với

console.log(x+y);
var x = 5;
var y = 7;

Ở ví dụ dưới, JS biết rằng có hai biến x và y nhưng ở bước console.log thì chúng chưa được gán giá trị, nên kết quả sẽ là NaN, còn ở ví dụ trên thì x và y đã được gán giá trị nên kết quả là 12

Hoisting là vấn đề thường hay bị bỏ qua khi code JS, nếu không nắm rõ hành vi hoisting thì sẽ đễ dẫn đến bug trong code. Quy luật chung để né hoisting chính là luôn khai báo biến trước khi sử dụng nó, cụ thể là ở trên đầu scope càng tốt