Hoisting trong JavaScript là gì?

Tìm hiểu xem Hoisting trong JavaScript là gì, với các ví dụ về mã để giúp giải thích về nó.

Hoisting có thể là một trong những chủ đề gây nhức nhối nhất trong JavaScript nếu bạn là người mới. Nó gây nhầm lẫn cho hầu hết mọi người khi bắt đầu. Đừng lo lắng — tôi sẽ giúp bạn hiểu cách nó hoạt động trong JavaScript trong bài viết này.

Hoisting là gì?

Hoisting là hành vi mặc định của JavaScript là di chuyển tất cả các khai báo lên đầu phạm vi hiện tại.

Các mục sau không bị hoisted trong JavaScript:

1. Các hàm được xác định bằng một biểu thức
2. Các biến và hằng được khai báo với let hoặc const.
3. Arrow functions.

Trong JavaScript, một biến có thể được sử dụng trước khi nó được khai báo.

x = 5;
console.log(x * 2); // Prints 10 in the console
var x;

Hãy để tôi giúp bạn hiểu điều này bằng một vài ví dụ.

function foo(){
    function bar() {
        return 7;
    }
    return bar();
    function bar() {
        return 11;
    }
}
console.log(foo()); // Prints 11

Khi một khai báo hàm bị hoisted. Hàm khai báo được nâng lên. Sau khi trình thông dịch kết thúc với mã trong ví dụ đầu tiên, nó sẽ chạy như sau:

function foo(){
    //define bar once
    function bar() {
        return 7;
    }
    //redefine it
    function bar() {
        return 11;
    }
    //return its invocation
    return bar();
}
console.log(foo());

Khai báo các biến của bạn ở trên cùng để tránh lộn xộn

Hoisting, dù thú vị đến đâu, có thể dẫn đến lỗi vì nó khá dễ bị bỏ qua.

Bạn có thể thử strict mode, đặt use strictở trên đầu file. JavaScript ở strict mode không cho phép các biến được sử dụng nếu chúng không được khai báo.

Đó là tất cả cho bài viết này. Tôi hy vọng nó đã giúp bạn hiểu rõ hơn về Hoisting trong JavaScript.