Tìm hiểu về Hoisting trong JavaScript

Hoisting là một khái niệm cơ bản trong JavaScript, ảnh hưởng đến cách mà biến và hàm được khai báo và thực thi bởi trình thông dịch JavaScript. Khái niệm này thường gây bối rối cho nhiều lập trình viên mới, nhưng khi đã hiểu rõ, nó sẽ giúp bạn viết code dễ hiểu và dễ dự đoán hơn.

Hoisting là gì?

Hoisting là hành vi mặc định trong JavaScript, trong đó các khai báo (biến và hàm) sẽ được đưa lên đầu phạm vi (scope) trước khi mã thực sự được thực thi. Điều này có nghĩa là bạn có thể sử dụng biến hoặc hàm trước khi chúng được khai báo chính thức.

Hoisting với biến

Trong JavaScript, chỉ các khai báo biến mới được hoisted, không phải phần gán giá trị. Xem ví dụ dưới đây:

console.log(x); // Kết quả: undefined
var x = 10;
console.log(x); // Kết quả: 10

Cách JavaScript xử lý đoạn mã trên:

var x; // khai báo được hoisted
console.log(x); // Kết quả: undefined
x = 10; // giá trị được gán tại đây
console.log(x); // Kết quả: 10

Hoisting với hàm

Khác với biến, các khai báo hàm (function declaration) được hoisted hoàn toàn, nghĩa là bạn có thể gọi hàm trước khi khai báo:

sayHello(); // Kết quả: "Hello!"

function sayHello() {
  console.log("Hello!");
}

Function Expression và Hoisting

Tuy nhiên, function expressions thì khác. Chỉ phần khai báo biến mới được hoisted, không phải phần gán hàm:

sayGoodbye(); // TypeError: sayGoodbye is not a function

var sayGoodbye = function() {
  console.log("Goodbye!");
};

JavaScript hiểu như sau:

var sayGoodbye; // khai báo được hoisted
sayGoodbye(); // lỗi: sayGoodbye chưa được gán giá trị

sayGoodbye = function() {
  console.log("Goodbye!");
};

Hoisting với Let và Const

ES6 giới thiệu let và const, chúng cũng bị hoisted nhưng hoạt động hơi khác so với var. Các biến khai báo bằng let và const được hoisted nhưng không được khởi tạo ngay, tạo ra vùng chết tạm thời (Temporal Dead Zone – TDZ).

console.log(a); // ReferenceError: Cannot access 'a' before initialization
let a = 5;

Một số lưu ý thực tế để tránh nhầm lẫn

• Luôn khai báo các biến ở đầu phạm vi sử dụng.
• Nên dùng let và const thay cho var để tránh lỗi không mong muốn.
• Khai báo và khởi tạo biến trước khi sử dụng để code dễ đọc và dễ bảo trì.

Kết luận

Hiểu rõ về hoisting giúp lập trình viên viết mã rõ ràng và dễ dự đoán hơn, tránh được những lỗi phổ biến. Khi hiểu cách JavaScript xử lý mã phía sau hậu trường, bạn có thể tổ chức và tối ưu code hiệu quả hơn.

Đọc thêm

• MDN – Hoisting
• Event Loop trong JavaScript là gì?