Với anh em đã và đang code JS, chắc hẳn đã từng gặp những lỗi như "ReferenceError: Cannot access '...' before initialization", "TypeError: ... is not a function", hay đơn giản bị "undefined" trong khi "rõ ràng mình đã khai báo rồi mà" , "sao khai báo cùng một chỗ mà cái log ra có giá trị cái bị undefined là sao". Chẳng khác nào biến và hàm đã bị đánh cắp. Vậy, thủ phạm đứng sau vụ trộm này là gì?
Hoisting là gì? Trong JavaScript có một cơ chế được gọi là "Hoisting" mà các khai báo biến và hàm được đưa lên trên cùng của phạm vi hiện tại trước khi code được thực thi. Cơ chế này cho phép chúng ta sử dụng biến và hàm trước khi chúng được khai báo trong code.
1. Hoisting với var
Trong JavaScript, khi bạn khai báo biến bằng var, trình thông dịch sẽ tự động đưa phần khai báo lên đầu phạm vi nhưng không gán giá trị cho biến đó.
Giải thích:
Mã trên thực chất được trình thông dịch hiểu như sau:
Biến a đã được hoisted lên đầu phạm vi nhưng chưa được gán giá trị, do đó khi truy cập a trước khi gán, ta nhận được undefined.
2. Hoisting với let và const
Đối với let và const, hoisting vẫn xảy ra, nhưng với một số khác biệt quan trọng. Biến khai báo bằng let hoặc const không thể được truy cập trước khi chúng được khai báo, và nếu bạn cố gắng làm như vậy, bạn sẽ nhận được lỗi ReferenceError.
Giải thích: Cả let và const đều có "Temporal Dead Zone" (TDZ), nghĩa là biến không thể được truy cập cho đến khi chúng được khai báo.
3. Hoisting trong Function Declaration và Function Expression
Function Declaration
Khi bạn khai báo một hàm bằng cách sử dụng function declaration, hàm sẽ được hoisted hoàn toàn. Bạn có thể gọi hàm trước khi nó được khai báo trong mã.
Function Expression
Ngược lại, với function expression, chỉ có khai báo biến được hoisted, không phải định nghĩa hàm.
Giải thích: Dòng var hello = function() {...} thực chất là gán một biến hello với giá trị là một hàm ẩn danh. Do var được hoisted nhưng không có giá trị ban đầu, hello sẽ có giá trị undefined tại thời điểm gọi, gây ra lỗi.
Kết luận Hoisting là một khái niệm quan trọng trong JavaScript mà mọi lập trình viên cần nắm vững. Hiểu rõ cách hoạt động của hoisting sẽ giúp bạn viết mã hiệu quả hơn và tránh được những lỗi khó chịu.
Cảm ơn bạn đã dành thời gian cho những chia sẻ của mình. Nếu có sai sót rất mong nhận được góp ý để chúng ta cùng nhau phát triển. Hẹn gặp lại bạn trong các bài viết tiếp theo❤️