Khái niệm Hoisting trong JavaScript

Hoisting là hành vi mặc định của JavaScript về việc di chuyển tất cả các khai báo lên đầu (top) của phạm vi hiện tại (current scope), nghĩa là lên top của chương trình JavaScript hiện tại hoặc hàm hiện tại.

Nội dung chính:

Các khai báo JavaScript được Hoisted
Các khởi tạo JavaScript không được Hoisted

1. Các khai báo JavaScript được Hoisted

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

– Hay nói cách khác, một biến có thể được sử dụng trước khi nó được khai báo.

– Chính vì điều này mà 2 ví dụ bên dưới sẽ cho kết quả giống nhau:

Ví dụ 1:

[code language=”javascript”]x = 5; // Gán giá trị 5 cho x

elem = document.getElementById("demo"); // Tìm một element có id là "demo"
elem.innerHTML = x; // Hiển thị giá trị của x vào element này

var x; // Khai báo biến x[/code] Try it »

Ví dụ 2:

[code language=”javascript”]var x; // Khai báo biến x
x = 5; // Gán giá trị 5 cho x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x; // Display x in the element[/code] Try it »

– Đối với biến khai báo bằng từ khóa let hoặc const thì sẽ không được Hoisted.
– Chi tiết xem thêm: Từ khóa let | Từ khóa const.

2. Các khởi tạo JavaScript không được Hoisted

– JavaScript chỉ hoist các khai báo, chứ không hoist các khởi tạo.

– Chúng ta cùng xem xét 2 ví dụ sau:

Ví dụ 1:

[code language=”javascript”]var x = 5; // Khởi tạo x
var y = 7; // Khởi tạo y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y[/code] Try it »

Ví dụ 2:

[code language=”javascript”]var x = 5; // Khởi tạo x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y

var y = 7; // Khởi tạo y[/code] Try it »

– Ở ví dụ 1: y = 7, nhưng ở ví dụ 2: y = undefined. Bởi vì, ở ví dụ 2 chỉ khai báo biến y được hoisted lên top chương trình, còn việc khởi tạo giá trị (=7) cho biến y thì không được hoisted.

– Và cách viết sau cũng có ý nghĩa, kết quả tương tự như ví dụ 2 (y = undefined), vì khởi tạo của biến y không được hoisted lên top chương trình:

Ví dụ:

[code language=”javascript”]var x = 5; // Khởi tạo x
var y; // Khai báo y

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y; // Display x and y

y = 7; // Gán giá trị 7 cho y[/code] Try it »

★ Nên khai báo biến trước khi sử dụng

– Hoisting (đối với nhiều lập trình viên) là một hành vi có thể không biết hoặc bị bỏ qua khi làm việc với JavaScript. Nếu không hiểu về hoisting thì viết chương trình có thể có bugs (errors).

– Do đó, để tránh lỗi phát sinh không đáng có thì luôn khai báo biến trước khi chúng được sử dụng.

– Trong JavaScript, có chế độ “strict mode” không cho phép sử dụng các biến nếu chúng chưa được khai báo.
– Xem thêm: Strict Mode trong JavaScript là gì?