Hoisting là gì ?

Về cơ bản, khi Javascript compiles tất cả đoạn code mà bạn viết ra, tất cả các biến mà bạn khai báo bằng cách sử dụng var sẽ tự động được đẩy lên đầu của function (nếu được khai báo bên trong một function) hoặc lên đầu của file biên dịch (nếu được khai báo bên ngoài của một function) - đó gọi là Hoisting.

Hãy hiểu rằng, việc hoisting (dịch ra thì đại loại là đẩy dòng code lên) không thực sự xảy ra với đoạn code mà bạn viết ra, mà việc khi trình biên dịch Javascript đọc qua đoạn mã của bạn thôi. Nên đừng bạn tâm nhiều về vấn đề đó.

Hãy hình dung là hoisting sẽ đữa tất cả những thứ mình khai báo bằng var lên đầu, nhưng trên lý thuyết thì không có bất cứ thứ gì được thay đổi ở đây @@.

Để có thể hiểu rõ ràng hơn về vấn đề này, mình sẽ đưa ra một vài ví dụ cơ bản để chứng minh tác động của việc hoisting.

Hãy thử với đoạn mã dưới đây trong phạm vi global scope:

console.log(myName);
var myName = ‘Ta Bich Phuong’;

Thứ gì sẽ hiện ra với console.log() kia?

1. Uncaught ReferenceError: myName is not defined
2. Ta Phuong Thao
3. undefined

Khi chạy file js có chứa đoạn mã kia bạn sẽ nhận ra rằng lựa chọn thứ 3 mới là câu trả lời chính xác.

Như đã nêu ở trên, các biến sẽ được di chuyển lên đầu của một scope khi trình biên dịch Javascript chạy đoạn code của bạn(ngoại trừ việc sử dụng NodeJS - ở mức rất cơ bản chỉ đơn giản là trang web của bạn đang tải). Tuy nhiên, một lưu ý quan trọng cần phải nhớ ở đây là chỉ có duy nhất các biến mới được di chuyển lên đâu thôi, chứ không phải giá trị của biến đó.

Chỉ cần nắm rõ câu note trên là được. Có một câu hỏi khá là hay ở đây là: cho 1 file .js, tại dòng thứ 10 chúng ta khai báo: var myName = Ta Phuong Thao thì khi file js đó được compiled đoạn khai báo biến myName sẽ ở đâu?, đoạn gán giá trị biến myName sẽ ở đâu?

Hãy đọc lại đoạn code javascript ở trên, và sau đó bạn hãy xem lại cách mà trình Javascript biên dịch ở dưới đây

var myName;
console.log(myName);
myName = ‘Ta Phuong Thao’;

Đây là lý do tại sao console.log ở trên trả về giá trị undefined, đơn giản là biến myName đã tồn tại nhưng đơn giản là giá trị lại được khái bảo ở dòng thứ 3.

#javascript #web-development