VAR, LET, CONST TRONG JAVASCRIPT: TỪ VŨNG LẦY LỊCH ĐẾN SỰ CHUẨN MỰC HIỆN ĐẠI

trong JavaScript, việc khai báo biến tưởng chừng như đơn giản nhưng lại là cạm bẫy lớn nhất khiến nhiều lập trình viên dính lỗi ngớ ngẩn (như biến "tự biến mất", lỗi trùng tên hay các lỗi kỳ quặc về phạm vi). Sức mạnh của JS hiện đại nằm ở sự phân định rạch ròi giữa 3 từ khóa: var, let, và const.

Dưới đây là bài viết mổ xẻ chi tiết sự khác nhau cốt lõi giữa 3 cách gọi biến này.

1. Bản Chất Và Lịch Sử (The Context)

• var (Thời kỳ đồ đá - ES5 trở về trước): Là cách khai báo biến nguyên thủy của JavaScript. Nó mang trong mình rất nhiều cơ chế "ảo ma" gây khó hiểu cho người lập trình và hiện nay đã bị coi là Anti-pattern (tuyệt đối nên tránh dùng).
• let & const (Kỷ nguyên hiện đại - ES6 / 2015 trở đi): Được sinh ra để sửa chữa toàn bộ những lỗi thiết kế của var, mang lại sự an toàn, tường minh và chuẩn mực cho các hệ thống JavaScript/TypeScript lớn.

2. So Sánh 3 Cột Mốc Cốt Lõi

Để phân biệt rạch ròi, chúng ta dựa vào 3 tiêu chí kỹ thuật sau:

A. Phạm Vi Hoạt Động (Scope)

• var (Function Scope): Biến khai báo bằng var chỉ có phạm vi bên trong hàm chứa nó. Nếu nó nằm ngoài hàm (ví dụ trong một khối if hay vòng lặp for), nó sẽ lọt ra ngoài và trở thành Global variable (biến toàn cục), dễ dàng bị ghi đè nhầm lẫn.
• let & const (Block Scope): Tuân thủ phạm vi khối {} cực kỳ nghiêm ngặt. Biến khai báo bên trong một vòng lặp for, câu lệnh if, hay một cặp ngoặc nhọn bất kỳ thì chỉ tồn tại bên trong đó, chết đi ngay khi ra ngoài khối lệnh.

// Ví dụ về Scope với var vs let
if (true) {
    var x = 10;   // Lọt ra ngoài block!
    let y = 20;   // Chỉ sống trong block này!
}

console.log(x); // Kết quả: 10 (Vẫn in được, rất nguy hiểm)
console.log(y); // Lỗi: ReferenceError: y is not defined

B. Cơ Chế "Nâng" Biến (Hoisting) và Temporal Dead Zone (TDZ)

• var (Có Hoisting nhưng bị gán giá trị mặc định là undefined): Khi chương trình chạy, JavaScript gom tất cả các khai báo var lên trên cùng của scope. Do đó, bạn có thể gọi biến var trước khi dòng code khai báo xuất hiện mà không báo lỗi (nhưng giá trị sẽ là undefined).
• let & const (Có Hoisting nhưng bị chặn bởi TDZ): Chúng cũng được đưa lên đầu scope, nhưng không được khởi tạo giá trị. Nếu bạn cố tình truy cập biến trước dòng khai báo, JS sẽ văng lỗi ngay lập tức (ReferenceError). Vùng đất cấm từ đầu scope đến điểm khai báo được gọi là Temporal Dead Zone.

console.log(a); // In ra: undefined (Không lỗi, nhưng rất dễ bug logic)
var a = 5;

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

C. Khả Năng Gán Lại Giá Trị (Re-assignment & Mutability)

• var & let (Có thể thay đổi): Cho phép bạn gán lại giá trị mới cho biến bất cứ lúc nào sau khi đã khai báo. Riêng var còn cho phép khai báo trùng tên biến liên tục trong cùng một scope mà không báo động gì.
• const (Hằng số - Bất biến): Viết tắt của từ Constant. Một khi đã gán giá trị cho const, bạn tuyệt đối không được gán lại giá trị khác cho nó nữa. Nếu cố tình gán lại, JS sẽ báo lỗi ngay lúc biên dịch.

Lưu ý kỹ thuật: const khóa địa chỉ tham chiếu, chứ không khóa giá trị bên trong. Nghĩa là nếu const trỏ đến một Object hoặc một Array, bạn hoàn toàn có thể thay đổi thuộc tính bên trong object đó (obj.name = 'Hiếu'), nhưng không được phép gán obj = {} hoàn toàn mới.

3. Bảng Tổng Kết Nhanh Cho Kỹ Sư

💡 Lời Khuyên Thực Chiến

Trong quy chuẩn viết code hiện đại (Clean Code), quy tắc vàng dành cho lập trình viên là:

1. Mặc định sử dụng const cho 90% các trường hợp (giúp code an toàn, không bị vô tình ghi đè dữ liệu).
2. Chỉ chuyển sang dùng let khi bạn biết chắc chắn biến đó sẽ phải thay đổi giá trị liên tục trong tương lai (ví dụ biến đếm i trong vòng lặp for).
3. Vứt xó vĩnh viễn từ khóa var ra khỏi não bộ của bạn.