Const vs Let trong JavaScript

So sánh const và let (ES2015/ES6)

Cả let và const đều được giới thiệu trong ES2015 để khai báo biến block-scoped (phạm vi khối), thay thế var (function-scoped). Sự khác biệt chính:

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Const và Let</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result, .sample { font-size: 18px; font-weight: 500; font-family: monospace; }
        .result { color: green; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>Const và Let trong JavaScript</h1>
    <div class="sample"></div>
    <div class="result"></div>
    <button class="btn-demo">THỬ GÁN LẠI</button>
    <h3>Nhấn nút để thử gán lại giá trị const và let</h3>

    <script>
        const resEle = document.querySelector(".result");
        const sampleEle = document.querySelector(".sample");
        const btn = document.querySelector(".btn-demo");

        let a = 22;        // let: có thể gán lại
        const b = 44;      // const: không thể gán lại

        sampleEle.textContent = `let a = ${a}\nconst b = ${b}`;

        btn.addEventListener("click", () => {
            // Gán lại let - OK
            a = 99;
            resEle.textContent = `Gán lại a = ${a}\n`;

            // Gán lại const - LỖI
            try {
                b = 22; // TypeError: Assignment to constant variable
            } catch (err) {
                resEle.textContent += `Gán lại b = LỖI: ${err.message}`;
            }
        });
    </script>
</body>
</html>

Quy tắc tốt (Best Practice)

1. Mặc định dùng const cho mọi khai báo biến.
2. Chỉ dùng let khi cần gán lại biến (counter, swap, accumulator...).
3. Tránh var trong code hiện đại.

const với Object/Array - Hiểu đúng bản chất

// const ngăn chặn GÁN LẠI BIẾN, không ngăn thay đổi NỘI DUNG
const user = { name: 'John' };
user.name = 'Jane';     // ✓ OK - thay đổi property
user.age = 30;          // ✓ OK - thêm property
// user = {};           // ✗ LỖI - gán lại biến

const arr = [1, 2, 3];
arr.push(4);            // ✓ OK - thay đổi nội dung mảng
arr[0] = 99;            // ✓ OK
// arr = [];             // ✗ LỖI - gán lại biến

// Muốn object/array bất biến thực sự? Dùng Object.freeze()
const frozen = Object.freeze({ a: 1 });
// frozen.a = 2; // Lỗi (strict mode) hoặc thất bại thầm

Temporal Dead Zone (TDZ)

Cả let và const đều bị hoisted nhưng không được khởi tạo. Truy cập trước dòng khai báo ném ReferenceError:

console.log(x); // ReferenceError (không phải undefined)
let x = 5;