Javascript cơ bản toàn tập – Tìm hiểu hoisting

Hoisting là gì ?

Hoisting trong Javascript hiểu đơn giản là một cơ chế trong đó các biến và hàm khi khai báo sẽ di chuyển lên trên cùng phạm vi của chúng trước khi code được thực thi.

Undefined và Reference Error

Như bài trước chúng ta đã tìm hiểu đó là nếu khai báo một biến nào đó mà chưa gán giá trị cho chúng thì giá trị của nó sẽ là undefined. Ví dụ let number thì number lúc này có giá trị là undefined.

Một trường hợp khác đó là biến chưa được khai báo trước đó mà chúng ta vẫn gọi chúng ra ví dụ console.log(variable) thì lúc này cái variable này chưa được khai báo trước đó cho nên chương trình sẽ sinh ra lỗi “// Output: ReferenceError: variable is not defined”.

Sau đây là các trường hợp về hoisted mà các bạn nên biết khi code Javascript nhé.

Từ khoá var

Phạm vi hoạt động của từ khoá var khi khai báo là global(toàn cục) tức là cho dù khai báo bên trong hàm(function) đi chăng nữa hay trong block scope( trong function, câu điều kiện như if hay else) thì nó vẫn hoạt động là global(scope là gì mình sẽ nói ở một bài khác nha). Đọc khái niệm thôi thì thật sự khó hiểu cho nên mình có làm vài ví dụ dưới đây cho các bạn dễ hình dung nha.

Global variable (biến toàn cục)

Như khúc trên mình có nói nếu chúng ta in ra giá trị của một biến nào đó mà chưa được khai báo thì chương trình sẽ in ra lỗi là Output: ReferenceError: name is not defined, tuy nhiên ở đây nó lại không ra như chúng ta mong đợi mà là nó in ra undefined. Tại sao lại như vậy ?

Bởi vì do hoisted trong Javascript, chương trình sẽ đưa các biến lên trên cùng của code, lúc này code của chúng ta sẽ được biên dịch ra như thế này và nhìn vào đây thì các bạn sẽ dễ hiểu hơn

Nhìn vào đoạn code trên thì các bạn cũng có thể hình dung ra được là biến name lúc này sẽ là undefined vì chỗ var name chúng ta đã khai báo nhưng chưa gán dữ liệu cho nên lúc console.log thì giá trị sẽ là undefined.

Vì hoisted cho nên chúng ta có thể sử dụng biến trước khi nó được khai báo luôn hay quá đúng không. Tuy nhiên chúng ta nên cẩn thận khi sử dụng, vì hoisted cho nên lúc này giá trị của chúng sẽ luôn là undefined. Vì thế cách tốt nhất là các bạn nên khai báo biến và gán giá trị ban đầu luôn cho an tâm nha.

Function scope variables (biến cục bộ)

Như ở trên là khi chúng ta dùng biến toàn cục, còn ở đây là chúng ta sẽ sử dụng trong hàm hay còn gọi là local scope, xem nó hoạt động như nào nhé

Các bạn đoán thử xem chỗ console.log(message) giá trị của nó là gì nào ? Nếu các bạn nghĩ là undefined thì đúng rồi đó. Và đoạn code trên lúc này Javascript nó sẽ biên dịch ra như sau

Vì hoisted nên biến message nó di chuyển lên trên cùng trong hàm cho nên mới ra kết quả là undefined. Vì thế như mình cũng nói ở trên thì tốt nhất là khai báo trên cùng và gán giá trị ngay từ đầu luôn

Từ khoá let

Hình như ở bài trước mình có nói về let rồi letblock scope và không phải là function scope. Điều đó nghĩa là nó khác hẳn so với từ khoá var(global scope), cho nên khi sử dụng let thì các bạn cẩn thận lỗi nếu không biết cách sử dụng. Và đây là một ví dụ

Đối với từ khoá var thì chương trình sẽ in ra là undefined, tuy nhiên với block scope như let thì lúc này nó sẽ không có hoisted cho nên chương trình sẽ thông báo ra lỗi, vì một biến chưa được khai báo mà được dùng thì sẽ có lỗi như trên. Vì thế để fix vấn đề này thì chúng ta cần khai báo biến trước khi sử dụng.

Một vấn đề nữa nếu chúng ta khai báo như dưới đây thì sẽ in ra undefined vì lúc này với từ khóa let thì các bạn đã khai báo biến rồi nhưng chưa gán giá trị cho nó, cũng tương tự từ khoá var cho trường hợp này

Từ khoá const

Như mình đã nói ở bài trước thì từ khóa const một khi đã khai báo thì không được phép thay đổi giá trị của chúng về sau và khi khai báo với từ khoá const thì bắt buộc phải gán giá trị ban đầu. Ví dụ mình khai báo số PI là 3.142 sau đó mình gán lại cho PI một giá trị khác thì chương trình sẽ báo ngay lỗi không thể gán giá trị mới cho const.

Một trường hợp khác đó là sử dụng trước khi khai báo thay vì như từ khoá var in ra undefined thì với const sẽ in ra is not defined.

Tương tự cho hàm thì cũng thế, khi sử dụng const trong hàm cũng sẽ in ra is not defined thay vì undefined như từ khoá var

Hoisting đối với hàm

Trong hàm thì có 2 loại đó là expressiondeclaration (Hàm là gì và làm sao sử dụng thì mình sẽ nói thêm ở một bài khác nữa nha).

Đối với function declaration thì sẽ bị hoisted nghĩa là có thể sử dụng function trước khi được khai báo luôn như này, và đoạn code vẫn chạy như thường và không hề có lỗi gì cả

Tuy nhiên đối với function expression thì lại không bị hoisted cho nên nếu chúng ta sử dụng hàm trước khi khai báo thì sẽ lỗi ngay

Cho nên các bạn lưu ý những vấn đề tuy cơ bản này nhưng rất quan trọng trong khi code Javascript nhé. Javascript học thì có thể hiểu nhưng truyền đạt để giúp người khác hiểu thực sự khó cho nên nếu các bạn thấy mình trình bày sai ở đâu, hay thiếu sót thì gì góp ý bổ sung giúp mình nha. Xin cám ơn các bạn và chúc các bạn một ngày tốt lành.

Bài viết có tham khảo từ scotch.io

Related Posts
avatar
900