Xem thêm:

Var, let và const trong Javascript

Scope trong Javascript

Hoisting trong Javascript là gì?

Từ xưa giờ khi làm việc với javascript, thì chắc hẳn các bạn cũng nghe tới thuật ngữ Hoisting rồi đúng không.

Vậy Hoisting là cái quái gì vậy? nó có ăn được không? nó giúp ích gì cho chúng ta?

Mình sẽ giúp các bạn hiểu rõ về nó để chúng ta có đủ kiến thức và sự tự tin khi làm việc với javascript hơn nhé :)

Định nghĩa:

Hoisting nghe cao sang vậy thôi, chứ thật ra không có gì là cao siêu đâu nhé.

Hoisting là cơ chế của Javascript sẽ chuyển các phần khai báo của biến và hàm lên top của phạm vi của biến và hàm đó.

Nói 1 cách khác là 1 biến có thể được sử dụng trước khi nó được khởi tạo.

Ví dụ 1 - variable:

Định nghĩa chỉ có vậy, nó hơi khó hiểu, để mình thêm ví dụ để các bạn dễ hiểu hơn:

console.log(hello);
var hello = "Xin chào";

Code trên được Javascript biên dịch như sau:

var hello;
console.log(hello);
hello = "Xin chào";

Cho nên kết quả của ví dụ trên là: undefined.

Các bạn có hình dung ra được không, Javascript sẽ tự động chuyển phần khai báo của biến hello lên đầu tiên của đoạn code, khởi tạo biến xong rồi mới thực hiện các logic khác bên dưới.

Ví dụ 2 - function:

sayHello();

function sayHello() {
  console.log("Xin chào");
}

Tương tự như biến, function cũng được Javascript hoisted lên trên cùng của phạm vi.

Kết quả: Xin chào.

Điều đó có nghĩa là bạn hoàn toàn có thể gọi 1 function ở dưới (trước khi viết hàm) để sử dụng mà không gặp lỗi.

Nó sẽ tiện lợi cho chúng ta khi cấu trúc code để dễ làm việc hơn, ví dụ xử lý logic ở trên, phía dưới sẽ là nơi chứa các hàm và biến.

Ví dụ 3:

sayHello();

function sayHello() {
  console.log(hello);
  var hello = "Xin chào";
}

Kết quả: undefined.

Lưu ý:

Javascript chỉ hoist phần khai báo biến và hàm lên top của phạm vi (scoped), các phần logic khác như gán giá trị thì không được hoist.

Nếu có thắc mắc gì thì các bạn cứ bình luận bên dưới để mình giải đáp nhé :)