[Javascript] – Phần 47: Hoisting trong JavaScript

Hoisting là một hành vi mặc định của JavaScript trong việc di chuyển các khai báo biến lên đầu phạm vi (scope) hiện tại. Phạm vi có thể là toàn bộ script, một hàm hoặc một khối code được bao bởi cặp dấu { }.

1. Biến được Hoisting.

Bạn có thể sử dụng biến trước khi khai báo nó trong JavaScript. Ví dụ:

x = 5; // Gán giá trị 5 cho x

elem = document.getElementById("demo"); // Tìm một element
elem.innerHTML = x; // Hiển thị x trong element

var x; // Khai báo x

Dù khai báo x sau khi sử dụng, đoạn code vẫn chạy bình thường. Lý do là JavaScript đã hoisting khai báo biến x lên đầu scope.

2. Các từ khóa let và const.

Các biến được khai báo bằng let và const cũng được hoisting lên đầu block, nhưng không được khởi tạo giá trị.

Điều này có nghĩa là block code biết đến sự tồn tại của biến, nhưng không thể sử dụng cho đến khi nó được khai báo (gán giá trị).

Sử dụng biến let trước khi khai báo sẽ dẫn đến lỗi ReferenceError. Biến sẽ ở trong vùng chết tạm thời (temporal dead zone) từ đầu block cho đến khi được khai báo.

Ví dụ:

carName = "Volvo"; // Lỗi ReferenceError: carName is not defined
let carName;

Sử dụng biến const trước khi khai báo sẽ dẫn đến lỗi cú pháp, khiến code không chạy.

Ví dụ:

carName = "Volvo"; // Lỗi cú pháp
const carName;

3. Khởi tạo biến không Hoisting.

Để hiểu điều này, chúng ta cần phân biệt giữa khai báo biến và khởi tạo biến.

Khai báo biến là việc xác định tên và phạm vi của biến.

Ví dụ:

var x; // Khai báo biến x

Khởi tạo biến là việc gán giá trị cho biến.

Ví dụ:

var x = 5; // Khai báo và khởi tạo biến x

JavaScript sẽ hoisting khai báo biến lên đầu scope. Điều này có nghĩa là biến sẽ được biết đến với trình thông dịch JavaScript ngay cả khi nó được khai báo sau khi sử dụng. Tuy nhiên, JavaScript không hoisting khởi tạo biến.

Ví dụ:

x = 5; // Khởi tạo biến x
var x; // Khai báo biến x

Trong ví dụ này, biến x sẽ được biết đến với trình thông dịch JavaScript ngay cả khi nó được khai báo sau khi sử dụng. Tuy nhiên, biến x sẽ có giá trị undefined vì giá trị 5 chỉ được gán cho biến x sau khi biến x được khai báo.

Để tránh lỗi, chúng ta nên luôn khai báo tất cả biến ở đầu scope. Điều này sẽ giúp trình thông dịch JavaScript hiểu rõ ràng phạm vi của các biến và tránh các lỗi không mong muốn.