Thuật ngữ "Hoisting" trong JavaScript

Trong JavaScript, thuật ngữ "hoisting" (dựng lên) đề cập đến hành vi của ngôn ngữ khi các khai báo biến và hàm được đưa lên đầu phạm vi chứa chúng trong quá trình thực thi mã. Điều này có nghĩa là các khai báo biến và hàm được xử lý trước khi bất kỳ đoạn mã nào được thực thi.

Hoisting với Khai Báo Biến#

Khi bạn khai báo biến bằng var, khai báo biến đó được đưa lên đầu phạm vi của nó (hàm hoặc toàn cục). Tuy nhiên, chỉ có khai báo được hoisted, không phải giá trị gán.

Ví Dụ

console.log(a); // Output: undefined var a = 5; console.log(a); // Output: 5

Trong ví dụ trên, var a được hoisted lên đầu phạm vi, nhưng giá trị 5 không được hoisted. Kết quả là console.log(a) trước khi khai báo biến in ra undefined vì biến a đã được khai báo nhưng chưa được gán giá trị.

Hoisting với Hàm#

Khai báo hàm bằng cách sử dụng function cũng được hoisted. Toàn bộ hàm, bao gồm cả thân hàm, được đưa lên đầu phạm vi.

Ví Dụ

` greet(); // Output: "Hello"

function greet() { console.log("Hello"); } `

Trong ví dụ này, hàm greet có thể được gọi trước khi nó được khai báo trong mã, vì cả khai báo hàm và thân hàm đều được hoisted lên đầu phạm vi.

Hoisting với let và const#

Khai báo biến với let và const không được hoisted giống như var. Mặc dù các khai báo này cũng được hoisted lên đầu phạm vi, nhưng chúng không được khởi tạo cho đến khi đoạn mã chạy đến dòng khai báo biến. Trong khoảng thời gian từ khi biến được hoisted đến khi nó được khởi tạo, biến đó được đặt trong trạng thái "temporal dead zone" (vùng chết tạm thời) và không thể được truy cập.

Ví Dụ

console.log(b); // ReferenceError: Cannot access 'b' before initialization let b = 10;

Trong ví dụ này, let b bị hoisted, nhưng khi bạn cố gắng truy cập b trước khi nó được khởi tạo, bạn sẽ gặp lỗi ReferenceError.

Hoisting và Hàm Biểu Thức#

Hàm biểu thức (function expressions) không được hoisted giống như hàm khai báo. Chỉ phần khai báo hàm (với từ khóa function) được hoisted, còn hàm biểu thức không được hoisted.

Ví Dụ

console.log(f); // Output: undefined var f = function() { console.log("Function expression"); };

Ở ví dụ này, f là một biến chứa hàm biểu thức, và f sẽ được hoisted như một biến, không phải hàm. Do đó, console.log(f) trước khi khai báo biến in ra undefined.

Tóm Tắt#

• Hoisting: Hành vi trong JavaScript mà các khai báo biến và hàm được đưa lên đầu phạm vi trước khi mã được thực thi.

• var: Khai báo biến bằng var được hoisted, nhưng giá trị gán thì không.

• function: Khai báo hàm được hoisted hoàn chỉnh (bao gồm thân hàm).

• let và const: Khai báo biến với let và const cũng được hoisted, nhưng chúng không được khởi tạo cho đến khi đoạn mã đến dòng khai báo biến, và truy cập trước khi khởi tạo gây lỗi.

• Hàm biểu thức: Không được hoisted giống như hàm khai báo; chỉ khai báo hàm (function) được hoisted, không phải giá trị của hàm biểu thức.

Hiểu cách hoisting hoạt động giúp bạn tránh các lỗi phổ biến và viết mã JavaScript chính xác hơn.