Hoisting & TDZ

Đoạn code dưới đây trông như sẽ lỗi, nhưng nó chạy ngon và in ra undefined. Vì sao một biến lại có giá trị trước cả dòng khai báo của nó?

console.log(x);   // undefined  (khong loi!)
var x = 5;
console.log(x);   // 5

undefined
5

Hiện tượng này gọi là hoisting (tạm dịch: "cẩu" khai báo lên đầu phạm vi). Người ta hay nói "JavaScript kéo khai báo var và function lên đầu" - nhưng đó chỉ là cách nói cho dễ hình dung. Sự thật nằm ở cách engine chuẩn bị code TRƯỚC khi chạy.

• ▸Đọc một biến var trước dòng khai báo: ra undefined, không phải lỗi.
• ▸Tên gọi: hoisting - "cẩu" khai báo lên đầu phạm vi.
• ▸"Di chuyển code lên đầu" chỉ là hình ảnh ẩn dụ - cơ chế thật ở Bước 2.

V8 không chạy code của bạn ngay dòng đầu. Với mỗi đoạn code (cả script lẫn thân mỗi hàm), nó lập một execution context qua hai pha:

Vì pha tạo chạy trước, function declaration đã có sẵn cả thân hàm - nên gọi nó trước dòng định nghĩa vẫn chạy:

console.log(tong(2, 3));   // 5  (goi truoc!)

function tong(a, b) {
  return a + b;
}

5

Nhưng function expression thì khác: nó chỉ là một biến var được gán một hàm. Ở pha tạo, biến đó mới là undefined - gọi vào sẽ lỗi:

try {
  nhan(2, 3);
} catch (e) {
  console.log(e.constructor.name + ": " + e.message);
}

var nhan = function (a, b) { return a * b; };

TypeError: nhan is not a function

• ▸Execution context có 2 pha: tạo (lập binding) rồi mới chạy (gán giá trị).
• ▸function declaration được cẩu cả tên lẫn thân -> gọi trước vẫn chạy.
• ▸function expression chỉ là biến var/let -> theo luật hoisting của biến đó.

Một hiểu lầm phổ biến: "let/const không được hoisting". Sai - chúng VẪN được tạo binding ở pha tạo. Khác biệt là chúng chưa được khởi tạo cho tới khi luồng chạy tới dòng khai báo. Khoảng từ đầu phạm vi đến dòng đó gọi là temporal dead zone (TDZ) - chạm vào là ném lỗi:

try {
  console.log(y);
} catch (e) {
  console.log(e.constructor.name + ": " + e.message);
}

let y = 10;

ReferenceError: Cannot access 'y' before initialization

TDZ nghiêm tới mức cả typeof cũng không thoát. So sánh: một tên CHƯA hề khai báo thì typeof trả về "undefined" an toàn, nhưng một biến let trong TDZ vẫn ném lỗi:

console.log(typeof chuaCo);   // "undefined" - chua khai bao bao gio
try {
  console.log(typeof z);      // z dang trong TDZ
} catch (e) {
  console.log(e.constructor.name + ": " + e.message);
}

let z = 1;

undefined
ReferenceError: Cannot access 'z' before initialization

• ▸let/const VẪN được hoisting (tạo binding), chỉ là chưa khởi tạo.
• ▸TDZ = khoảng từ đầu phạm vi tới dòng khai báo; chạm vào -> ReferenceError.
• ▸typeof một biến trong TDZ vẫn lỗi, khác typeof tên chưa khai báo (ra "undefined").

Vì var phạm vi theo HÀM và được cẩu lên đầu hàm, một khai báo var nằm sâu trong nhánh không bao giờ chạy vẫn kịp che mất biến cùng tên ở ngoài - và để lại undefined:

var trangThai = "active";

function kiemTra() {
  console.log(trangThai);        // undefined, KHONG phai "active"!
  if (false) {
    var trangThai = "inactive";  // bi cau len dau ham
  }
}

kiemTra();

undefined

Bên trong kiemTra, engine cẩu var trangThai lên đầu hàm (giá trị undefined), nên dòng console.log thấy biến cục bộ này chứ không thấy "active" ở ngoài. Đổi sang const là hết bug - không còn cẩu kiểu var, và TDZ sẽ tố cáo ngay nếu lỡ dùng sai:

const trangThai = "active";

function kiemTra() {
  console.log(trangThai);   // "active"
}

kiemTra();

active

Đây là cùng họ với bug var trong vòng lặp mà bạn đã gặp ở bài Hàm, closure & this (khoá JavaScript cơ bản): gốc rễ đều là phạm vi theo hàm + hoisting của var.

• ▸Mặc định dùng const, đổi sang let khi cần gán lại - bỏ hẳn var.
• ▸Khai báo SÁT nơi dùng để TDZ làm việc thay bạn, đừng dựa vào hoisting của var.
• ▸Bật quy tắc lint no-use-before-define để máy bắt lỗi dùng-trước-khai-báo.

Không phải mọi hoisting đều xấu. Hoisting của function declaration là công cụ thật: nó cho hai hàm gọi qua lại nhau (đệ quy lồng nhau, mutual recursion) dù hàm này định nghĩa sau hàm kia, và cho bạn đặt lời gọi chính lên trên cùng, hàm phụ để xuống dưới:

console.log(laChan(10));   // true
console.log(laChan(7));    // false

function laChan(n) {
  return n === 0 ? true : laLe(n - 1);
}
function laLe(n) {
  return n === 0 ? false : laChan(n - 1);
}

true
false

Lời gọi nằm TRÊN cả hai định nghĩa mà vẫn chạy, vì ở pha tạo cả laChan lẫn laLe đã sẵn sàng. Lối viết này giúp đọc code như đọc báo: ý chính trước, chi tiết sau - thay vì bắt người đọc cuộn xuống cuối mới thấy hàm khởi đầu.

Cũng chính cái binding tạo ở pha tạo là thứ một closure "nhớ" được, và là thứ garbage collector dò theo (reachability) để quyết định giữ hay dọn. Hoisting, scope, closure và GC đều là các mặt của cùng một câu chuyện: engine quản lý binding ra sao. Nền tảng let/const này bạn đã đặt từ bài Biến & kiểu dữ liệu JavaScript.

• ▸function declaration hoisting: hợp cho mutual recursion và lối viết đọc top-down.
• ▸Binding ở pha tạo chính là thứ closure giữ và GC dò theo reachability.
• ▸Quy tắc thực dụng: tận dụng hoisting của hàm, tránh hoisting của var.