Hoisting trong JavaScript là gì

Hoisting trong JavaScript là gì?

Anh NguyễnBạn nghĩ gì về bài viết này?

Khi mới bắt đầu code JavaScript, nhiều bạn sẽ gặp phải nhiều trường hợp dẫn tới Hoisting. Vậy Hoisting trong JavaScript là gì, cùng mình tìm hiểu nhé!

Hoisting trong JavaScript là gì?

Hoisting trong JavaScript là gì

Hoisting là một khái niệm trong JavaScript, không phải là một tính năng. Trong các ngôn ngữ lập trình kịch bản hoặc ngôn ngữ phía máy chủ khác, các biến hoặc hàm phải được khai báo trước khi sử dụng nó.

Trong JavaScript, tên biến và tên hàm có thể được sử dụng trước khi khai báo nó. Trình biên dịch JavaScript di chuyển tất cả các khai báo của các biến và hàm ở trên cùng để không có bất kỳ lỗi nào. Điều này được gọi là Hoisting.

x = 1;

alert('x = ' + x); // display x = 1

var x;Code language: JavaScript (javascript)

Hình sau minh họa cơ chế Hoisting:

Hoisting trong JavaScript là gì

Ngoài ra, một biến có thể được gán cho một biến khác như hình dưới đây.

x = 1;
y = x;

alert('x = ' + x);
alert('y = ' + y);

var x;
var y;Code language: JavaScript (javascript)

Hoisting chỉ có thể thực hiện được khi khai báo chứ không thể khởi tạo. JavaScript sẽ không di chuyển các biến được khai báo và khởi tạo trong một dòng.

alert('x = ' + x); // display x = undefined
        
var x = 1;Code language: JavaScript (javascript)

Như bạn có thể thấy trong ví dụ trên, giá trị của x sẽ không được xác định vì var x = 1 không được hoisting.

Hoisting của hàm

Hoisting trong JavaScript là gì

Trình biên dịch JavaScript di chuyển định nghĩa hàm ở trên cùng theo cách giống như khai báo biến.

alert(Sum(5, 5)); // 10

function Sum(val1, val2)
{
    return val1 + val2;
}Code language: JavaScript (javascript)

Xin lưu ý rằng trình biên dịch JavaScript không di chuyển biểu thức hàm.

Add(5, 5); // error

var Add = function Sum(val1, val2)
{
    return val1 + val2;
}Code language: JavaScript (javascript)

Hoisting hàm trước biến

Trình biên dịch JavaScript di chuyển định nghĩa của một hàm trước khi khai báo biến. Ví dụ sau đây chứng minh điều đó.

alert(UseMe);

var UseMe;

function UseMe()
{            
    alert("UseMe function called");
}Code language: JavaScript (javascript)

Theo ví dụ trên, nó sẽ hiển thị định nghĩa hàm UseMe. Vì vậy, hàm di chuyển trước các biến.

Kết luận

Như vậy, chúng ta không nên mắc vào cơ chế Hoisting khi sử dụng và nên tránh. Vì vậy, bạn hãy luyện tập các thói quen code clean, code đúng theo quy tắc thì những điều trên sẽ không bao giờ xảy ra. Mình sẽ tóm tắt lại các điểm cần ghi nhớ nhé:

  • Trình biên dịch JavaScript di chuyển các biến và khai báo hàm lên trên cùng và điều này được gọi là Hoisting.
  • Chỉ các khai báo biến mới di chuyển lên trên cùng, không phải là phần khởi tạo.
  • Định nghĩa hàm di chuyển đầu tiên trước các biến.

Cảm ơn bạn đã theo dõi bài viết!

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU

KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG

Bình luận