Hành vi hoisting của JavaScript

Trong hướng dẫn tự học JavaScript này, bạn sẽ tìm hiểu về hành vi hoisting của JavaScript.

Hoisting là gì?

Trong JavaScript, tất cả các khai báo biến và hàm được di chuyển hoặc kéo lên đầu phạm vi (scope) hiện tại của chúng, bất kể nó được định nghĩa ở đâu.

Đây là hành vi mặc định của trình thông dịch JavaScript được gọi là hoisting. Trong các phần sau, chúng ta sẽ xem xét kỹ hơn cách hoisting thực sự hoạt động ra sao.

Function hoisting

Các hàm được định nghĩa bằng cách sử dụng khai báo hàm sẽ tự động được hoisting (đưa phần khai báo lên đầu phạm vi).

Điều đó có nghĩa là chúng có thể được gọi trước khi chúng được định nghĩa.

Như thế này:

// Gọi đến hàm trước khi định nghĩa hàm
xinChao(); // Kết quả: À lố, hoi hoi hoi

function xinChao() {
    console.log("À lố, hoi hoi hoi");
}

Như bạn thấy, chúng ta đã gọi hàm xinChao() trước khi nó được định nghĩa, nhưng code vẫn hoạt động. Điều này là do khi thông dịch khai báo hàm được kéo lên đầu phạm vi.

Variable hoisting

Tương tự như vậy, các khai báo biến cũng được tự động đưa lên đầu phạm vi hiện tại của chúng.

Điều này có nghĩa là nếu biến được khai báo bên trong một khối hàm, nó sẽ được di chuyển ở trên cùng của hàm.

Nhưng nếu nó được khai báo bên ngoài bất kỳ hàm nào, nó sẽ được chuyển lên đầu của tập lệnh và có thể gọi ở bất kỳ đâu (biến toàn cục).

Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

// Gán biến
chao = "Hế lô";
// Sử dụng biến trước khi được khai báo
console.log(chao); // Kết quả: Hế lô
// Khai báo biến
var chao;

Tuy nhiên, JavaScript chỉ lưu trữ các khai báo chứ không phải khởi tạo.

Điều đó có nghĩa là nếu một biến được khai báo và khởi tạo sau khi sử dụng nó, hành vi hoisting sẽ diễn ra, nhưng lúc này biến có giá trị sẽ là undefined.

Ví dụ:

console.log(chao); // Kết quả: undefined
var chao;
chao = "Hế lô";

Chương trình trên tương đương hành vi như thế này:

// Khai báo biến
var chao; // Giá trị mặc định của biến chao lúc này là undefined
console.log(chao); // Kết quả: undefined
chao = "Hế lô";

Đây là một ví dụ khác thể hiện hành vi hoisting biến của JavaScript:

var i = 1; // Khai báo và khởi tạo i
console.log(i + ", " + j); // Kết quả: 1, undefined
var j = 2; // Khai báo và khởi tạo j

var x = 5; // Khai báo và khởi tạo x
var y; // Khai báo y
console.log(x + ", " + y); // Kết quả: 5, undefined
y = 10; // Khởi tạo y

var a = 3; // Khai báo và khởi tạo a
b = 6; // Khởi tạo b
console.log(a + ", " + b); // Kết quả: 3, 6
var b; // Khai báo b

var u = 4; // Khai báo và khởi tạo u
console.log(u + ", " + v); // Kết quả: 4, undefined
var v; // Khai báo v
v = 8; // Khởi tạo v

Hoisting biến thoạt nhìn có vẻ hơi khó hiểu, nhưng nếu bạn xem kỹ các ví dụ này, bạn sẽ dễ dàng hiểu cách hoạt động của nó thôi.

Lưu ý: Vì hành vi của hoisting có thể gây khó dễ cho bạn, nên Best practice là hãy khai báo các biến ở đầu phạm vi hiện tại. Ngoài ra, việc sử dụng một biến mà không khai báo là hành vi không được phép khi bật strict mode trong JavaScript.

Như vậy, qua bài này bạn đã hiểu thêm về hành vi hoisting của JavaScript. Có nhiều giải pháp để xử lý vấn đề này. Muốn biết thì hãy đọc bài viết tiếp theo.

Đọc thêm: Vay mượn phương thức trong JavaScript