Khái niệm

Hoisting là quá trình di chuyển các khai báo biến và hàm lên đầu phạm vi của chúng trước khi thực thi mã. Điều này có nghĩa là chúng ta có thể sử dụng biến và hàm trước khi chúng được khai báo trong mã. Tuy nhiên, giá trị của biến không được hoisted, chỉ có phần khai báo được di chuyển lên đầu.

Ví dụ

Hãy xem một ví dụ đơn giản về hoisting trong JavaScript:

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

Trong ví dụ trên, chúng ta có hai lần gọi hàm console.log để in ra giá trị của biến x. Trước khi khai báo biến x, chúng ta đã gọi console.log(x) và kết quả là undefined. Điều này xảy ra vì biến x đã được hoisted, nhưng giá trị của nó vẫn chưa được gán.

Sau đó, chúng ta khai báo và gán giá trị 5 cho biến x. Lần gọi thứ hai của console.log(x) sẽ in ra giá trị 5.

Hoisting với hàm

Hoisting cũng áp dụng cho khai báo và định nghĩa hàm trong JavaScript. Chúng ta có thể gọi hàm trước khi nó được khai báo trong mã.

hello(); // "Xin chào!"
function hello() {
  console.log("Xin chào!");
}

Trong ví dụ trên, chúng ta gọi hàm hello() trước khi nó được khai báo. Điều này là do JavaScript đã hoist hàm hello() lên đầu phạm vi của nó. Khi thực thi, hàm sẽ được gọi và in ra chuỗi "Xin chào!".

Hạn chế của Hoisting với let và const

Mặc dù hoisting áp dụng cho biến khai báo với từ khóa var, nhưng không áp dụng cho các biến được khai báo bằng let và const. Điều này có nghĩa là chúng ta không thể sử dụng biến let và const trước khi chúng được khai báo.

console.log(x); // Lỗi: Cannot access 'x' before initialization
let x = 5;
console.log(x); // 5

Trong ví dụ trên, khi chúng ta cố gắng gọi console.log(x) trước khi biến x được khai báo, JavaScript sẽ gây ra lỗi “Cannot access ‘x’ before initialization”. Điều này xảy ra vì biến let không được hoisted và không thể sử dụng trước khi chúng được khai báo.