Hoisting là cơ chế của Javascript, hoạt động khi bạn khai báo một biến hay hàm, cơ chế này sẽ đưa tất cả các phần khai báo lên đầu trong phạm vi thực thi của nó.

1. Hoisting đối với biến

Viết và chạy thử, sau đó quan sát kết quả đoạn code sau :

Kết quả của a sẽ là  undefined và b là RefereceError, nhưng vì sao lại là undefined và ReferenceError ? biến var được gọi trước khi khai báo và gán giá trị cho nó, ở đây hoisting sẽ hoạt động như thế này : Khi khai báo và gán giá trị cho a thì phần khai báo ( var a ) sẽ được đưa lên đầu khối thực thi, một biến khi khai báo sẽ được gán giá trị mặc định là undefined, tương tự với b, nhưng biến được khai báo bằng let thì sẽ không được phép truy cập trước phần khai báo.

2. Hoisting đối với hàm

2.1 Với khai báo hàm, cơ chế hoisting vẫn hoạt động như với biến, nhưng khác biệt ở đây là phần định nghĩa cũng sẽ được đưa lên đầu của khối thực thi, viết và chạy đoạn code sau và quan sát kết quả, chúng ta có thể thấy hàm greeting được gọi và thực thi như đã định nghĩa, mặc dù là gọi trước khi khai báo

2.2 Với biểu thức hàm, chúng ta sẽ làm tương tự như ở trên và quan sát kết quả

Thay vì nhận về kết quả là ‘Nice to meet you, K !’ như ở trên thì chúng ta sẽ nhận được lỗi ReferenceError, bản chất của biểu thức hàm là gán hàm cho một biến,  vì thế chúng ta sẽ gặp lỗi tham chiếu tương tự như trong phần 1, với khai báo là let thì sẽ gặp lỗi tham chiếu, không thể truy cập biến trước khi khởi tạo, với khai báo var thì sẽ gặp lỗi TypeError, greeting không là một hàm.

3. Xử lí vấn đề với hoisting

Bản thân mình thấy hoisting không phải là một vấn đề to tát, nhưng đôi khi chúng ta sẽ gặp một số lỗi liên quan đến hoisting vì thói quen viết và gọi hàm, biến vô tội vạ dẫn đến lỗi và dành cả giờ đồng hồ ra ngồi tìm lỗi, vì vậy để hạn chế vấn đề liên quan đến hoisting thì việc đầu tiên bạn cần chú ý là code một cách có quy tắc, nề nếp và chuẩn mực, ngoài ra việc sử dụng let hay const làm mặc định, trừ một số trường hợp đặc biệt phải dung var, và nhớ, tránh xa thằng var ra nhé !