- vừa được xem lúc

Giải ngố "Hoisting" trong JavaScript

0 0 3

Người đăng: Nguyễn Văn Khải

Theo Viblo Asia

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 đó. image.png

Giải thích: Mã trên thực chất được trình thông dịch hiểu như sau: image.png

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. image.png

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ã. image.png

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. image.png

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❤️

Bình luận

Bài viết tương tự

- vừa được xem lúc

var, let, const - Khác nhau chỗ nào?

Đây là một bài viết nhằm giúp các bạn mới tìm hiểu về Javascript clear rõ về vấn đề giữa ba cách khai báo biến đó là var, let, const. var.

0 0 35

- vừa được xem lúc

Khai báo biến với var, let và const trong JavaScript

Ba cách giúp bạn khai báo biến trong JavaScript là sử dụng từ khóa var, let, const. Đồng thời cũng làm quen với các loại scoped như local scoped, global scoped, block scoped, khái niệm Temporal Dead Z

0 0 29

- vừa được xem lúc

Are you really understand Javascript ?

Javascript Hoisting. .

0 0 24

- vừa được xem lúc

Code tốt hơn bằng cách làm theo các phương pháp hay nhất về JavaScript này

Cho dù bạn là một nhà phát triển dày dặn kinh nghiệm đang tìm cách tinh chỉnh phong cách viết mã của mình hay một người mới bắt đầu mong muốn nắm bắt các yếu tố cần thiết, bài đăng này là dành cho bạn

0 0 23

- vừa được xem lúc

Các câu lệnh cơ bản trong Javascript

Chương trình Javascript. Một chương trình máy tính là một danh sách các hướng dẫn được thực hiện bởi máy tính.

0 0 17

- vừa được xem lúc

How JavaScript Works Behind The Scenes (Part 1)

JavaScript, the backbone of web interactivity, is in high demand. It’s crucial for creating dynamic, user-friendly web applications.

0 0 16