Chào các bạn! Trong JavaScript, let, var và const là ba từ khoá để khai báo biến. Tuy nhiên, chúng có những khác biệt đáng kể về phạm vi hoạt động, khả năng thay đổi giá trị, và cách xử lý hoisting. Bài viết này sẽ giúp bạn hiểu rõ và chọn lựa từ khoá phù hợp khi làm việc với JavaScript.

1. var

var là từ khoá cổ điển để khai báo biến trong JavaScript. Đây là cách duy nhất trước khi ES6 (ECMAScript 2015) được giới thiệu.

Đặc điểm:

1. Phạm vi hoạt động:
   • var có phạm vi hàm (function scope) hoặc toàn cục (global scope).
   • Biến khai báo bằng varkhông bị ràng buộc bởi block (không hạn chỉ trong các block như if, for,...).
2. Hoisting:
   • Biến khai báo bằng var sẽ được hoisted (đưa lên đầu phạm vi hoạt động).
   • Khi hoisted, var được khởi tạo với giá trị undefined trước khi chạy đến dòng gán giá trị trong mã.
3. Có thể khai báo lại:
   • Bạn có thể khai báo lại biến cùng tên trong cùng phạm vi mà không gặp lỗi.

Ví dụ:

function testVar() {
    console.log(a); // undefined (hoisted)
    var a = 10;
    console.log(a); // 10

    if (true) {
        var b = 20;
        console.log(b); // 20
    }
    console.log(b); // 20 (vẫn truy cập được b ở ngoài block)
}

testVar();

2. let

let được giới thiệu trong ES6 như là một cách khai báo biến mới với những cải tiến về phạm vi hoạt động và hoisting.

Đặc điểm:

1. Phạm vi hoạt động:
   • let có phạm vi block (block scope).
   • Biến khai báo bằng let chỉ tồn tại trong block nơi nó được khai báo.
2. Hoisting:
   • Biến khai báo bằng let cũng bị hoisted, nhưng khác với var, nó nằm trong vùng "Temporal Dead Zone (TDZ)".
   • Điều này có nghĩa là bạn không thể sử dụng biến trước khi nó được khai báo trong mã.
3. Không thể khai báo lại:
   • Bạn không thể khai báo lại biến cùng tên trong cùng phạm vi.

Ví dụ:

function testLet() {
    // console.log(x); // ReferenceError (TDZ)
    let x = 10;
    console.log(x); // 10

    if (true) {
        let y = 20;
        console.log(y); // 20
    }
    // console.log(y); // ReferenceError (ngoài block không truy cập được)
}

testLet();

3. const

const cũng được giới thiệu trong ES6, được sử dụng để khai báo các giá trị hằng số (không thay đổi).

Đặc điểm:

1. Phạm vi hoạt động:
   • Giống let, const có phạm vi block (block scope).
2. Giá trị cố định:
   • Biến khai báo bằng constkhông thể thay đổi giá trị sau khi đã khai báo.
   • Tuy nhiên, nếu giá trị là một object hoặc array, bạn vẫn có thể thay đổi thuộc tính hoặc phần tử bên trong.
3. Hoisting:
   • Giống let, const cũng bị hoisted nhưng nằm trong "Temporal Dead Zone (TDZ)".
   • Điều này ngăn bạn sử dụng biến const trước khi nó được khai báo.

Ví dụ:

function testConst() {
    const PI = 3.14;
    console.log(PI); // 3.14

    // PI = 3.1415; // TypeError (không thể thay đổi giá trị)

    const obj = { name: 'John' };
    obj.name = 'Doe'; // Hợp lệ (có thể thay đổi thuộc tính object)
    console.log(obj.name); // Doe

    const arr = [1, 2, 3];
    arr.push(4); // Hợp lệ (có thể thay đổi phần tử array)
    console.log(arr); // [1, 2, 3, 4]
}

testConst();

4. Bảng so sánh

5. Khi nào sử dụng?

• var: Hạn chế sử dụng. Chỉ nên dùng khi buộc phải duy trì code cũ.
• let: Sử dụng cho những biến thay đổi giá trị trong quá trình chương trình.
• const: Dùng cho những giá trị không thay đổi, đặc biệt với object và array.

Hy vọng bài viết này giúp bạn hiểu rõ sự khác nhau giữa let, var và const, từ đó lựa chọn cách khai báo biến phù hợp trong các dự án JavaScript của mình.