Khai báo và sử dụng biến let trong JavaScript

Trong JavaScript, biến đóng vai trò quan trọng trong việc lưu trữ và quản lý dữ liệu. Việc khai báo biến đúng cách giúp mã nguồn dễ đọc, bảo trì và tránh các lỗi không mong muốn. Trước đây, JavaScript chỉ có từ khóa var để khai báo biến, nhưng nó có một số hạn chế như không có phạm vi khối (block scope) và dễ gây lỗi do hoisting.

Với sự ra đời của ES6, từ khóa let đã được giới thiệu để thay thế var trong nhiều trường hợp, giúp lập trình viên kiểm soát phạm vi biến tốt hơn và giảm thiểu lỗi. Trong bài viết này, mình sẽ tìm hiểu cách khai báo và sử dụng biến let trong JavaScript, cũng như so sánh sự khác biệt giữa let và var để hiểu rõ hơn về cách sử dụng hiệu quả.

Khai báo biến với let trong JavaScript

Cú pháp khai báo biến với let

Từ khóa let trong JavaScript được sử dụng để khai báo biến với phạm vi khối (block scope). Khi khai báo biến bằng let, bạn có thể gán giá trị ngay lập tức hoặc để trống và gán giá trị sau.

Cú pháp:

let tenBien; // Khai báo một biến nhưng chưa gán giá trị
let soLuong = 10; // Khai báo và gán giá trị ngay lập tức
let ten = "Nguyễn Văn A"; // Khai báo và gán giá trị kiểu chuỗi

Ví dụ minh họa:

let x; // Khai báo biến x
console.log(x); // Kết quả: undefined (biến được khai báo nhưng chưa gán giá trị)

let y = 5; // Khai báo biến y với giá trị ban đầu là 5
console.log(y); // Kết quả: 5

y = 10; // Gán lại giá trị mới cho y
console.log(y); // Kết quả: 10

Kết quả:

Trong ví dụ trên:

• x được khai báo nhưng chưa có giá trị, do đó khi in ra sẽ là undefined.
• y được khai báo với giá trị 5, sau đó giá trị của y được thay đổi thành 10.

Đặc điểm của biến khai báo bằng let

Không thể khai báo lại cùng một tên biến trong cùng một phạm vi

Khi khai báo biến bằng let, nếu bạn cố gắng khai báo lại một biến có cùng tên trong cùng một phạm vi, JavaScript sẽ báo lỗi.

Ví dụ minh họa:

let a = 10;
let a = 20; // Lỗi: Identifier 'a' has already been declared

Lỗi trên xảy ra vì biến a đã được khai báo bằng let và không thể khai báo lại trong cùng một phạm vi.

Tuy nhiên, nếu biến a được khai báo trong các phạm vi khác nhau (ví dụ: trong một khối {} khác), thì nó sẽ không gây lỗi:

let b = 30;
{
    let b = 40; // Hợp lệ, vì biến b này nằm trong một phạm vi khối khác
    console.log(b); // Kết quả: 40
}
console.log(b); // Kết quả: 30

Trong đoạn mã trên:

• Biến b trong khối {} là một biến khác, độc lập với biến b bên ngoài.
• Phạm vi của b bên trong {} chỉ có hiệu lực trong khối đó.

Có thể gán lại giá trị sau khi khai báo

Một trong những đặc điểm quan trọng của let là bạn có thể gán lại giá trị cho biến sau khi đã khai báo.

Ví dụ minh họa:

let diem = 8;
console.log(diem); // Kết quả: 8

diem = 9; // Gán lại giá trị mới
console.log(diem); // Kết quả: 9

Ở đây, biến diem được khai báo với giá trị ban đầu là 8, sau đó giá trị của nó được cập nhật thành 9. Điều này giúp let linh hoạt hơn so với const, vì const không cho phép gán lại giá trị sau khi khai báo.

Phạm vi hoạt động của let (Block Scope) trong JavaScript

Giải thích về phạm vi khối của let

Trong JavaScript, phạm vi (scope) của một biến quyết định nơi biến đó có thể được truy cập. Biến khai báo bằng let có phạm vi khối (block scope), nghĩa là nó chỉ tồn tại và có thể truy cập được bên trong khối {} mà nó được khai báo.

Khối {} có thể là:

• Một khối lệnh trong if, for, while, hoặc switch.
• Một cặp {} độc lập trong mã nguồn.

Nếu cố gắng truy cập biến let bên ngoài phạm vi khối {}, JavaScript sẽ báo lỗi.

Ví dụ minh họa về phạm vi khối của let:

{
    let x = 10;
    console.log(x); // Kết quả: 10 (Biến x tồn tại trong khối này)
}
console.log(x); // Lỗi: x is not defined (Không thể truy cập biến x ngoài khối {})

Kết quả:

Ở đây:

• Biến x được khai báo bên trong {} nên nó chỉ tồn tại trong phạm vi của khối đó.
• Khi cố gắng truy cập x bên ngoài khối, chương trình báo lỗi vì x không tồn tại ngoài phạm vi khối.

So sánh let với var (Phạm Vi Hàm)

Ví dụ minh họa so sánh let và var:

function testVar() {
    if (true) {
        var a = 10;
    }
    console.log(a); // Kết quả: 10 (Vẫn truy cập được vì var có phạm vi hàm)
}
testVar();

function testLet() {
    if (true) {
        let b = 20;
    }
    console.log(b); // Lỗi: b is not defined (Không thể truy cập biến b ngoài khối if)
}
testLet();

Giải thích:

• var a tồn tại trong toàn bộ hàm, dù nó được khai báo bên trong if.
• let b chỉ tồn tại trong khối if, nên khi truy cập ngoài if, chương trình báo lỗi.

Ví dụ minh họa phạm vi hoạt động của let trong một khối {}

Ví dụ 1: let bên trong vòng lặp for

for (let i = 0; i < 3; i++) {
    console.log(i); // Kết quả: 0, 1, 2
}
console.log(i); // Lỗi: i is not defined (Vì biến i chỉ tồn tại trong vòng lặp)

Ở đây, biến i chỉ tồn tại trong phạm vi {} của vòng lặp for. Khi cố gắng truy cập i bên ngoài vòng lặp, chương trình báo lỗi.

Ví dụ 2: let trong nhiều khối khác nhau

{
    let x = 5;
    console.log(x); // Kết quả: 5
}
{
    let x = 10;
    console.log(x); // Kết quả: 10 (X này khác với X ở khối trước)
}

let soLuong = 10; 
console.log(soLuong); // Kết quả: 10

soLuong = 20; // Gán lại giá trị mới
console.log(soLuong); // Kết quả: 20

let hoTen = "Nguyễn Văn A";
console.log(hoTen); // Kết quả: Nguyễn Văn A

hoTen = "Trần Thị B"; // Gán lại giá trị mới
console.log(hoTen); // Kết quả: Trần Thị B

let danhSach = [1, 2, 3, 4, 5];
console.log(danhSach); // Kết quả: [1, 2, 3, 4, 5]

danhSach[0] = 10; // Thay đổi phần tử đầu tiên của mảng
console.log(danhSach); // Kết quả: [10, 2, 3, 4, 5]

let nguoi = {
    ten: "Nguyễn Văn A",
    tuoi: 25
};
console.log(nguoi); // Kết quả: {ten: "Nguyễn Văn A", tuoi: 25}

nguoi.tuoi = 30; // Thay đổi giá trị thuộc tính
console.log(nguoi); // Kết quả: {ten: "Nguyễn Văn A", tuoi: 30}

for (let i = 0; i < 5; i++) {
    console.log("Giá trị của i: " + i);
}
console.log(i); // Lỗi: i is not defined (i chỉ tồn tại trong vòng lặp)

let j = 0;
while (j < 3) {
    console.log("Giá trị của j: " + j);
    j++;
}
console.log("Giá trị cuối cùng của j: " + j); // Kết quả: 3

let diem = 85;

if (diem >= 90) {
    console.log("Xếp loại: Xuất sắc");
} else if (diem >= 75) {
    console.log("Xếp loại: Giỏi");
} else if (diem >= 50) {
    console.log("Xếp loại: Trung bình");
} else {
    console.log("Xếp loại: Yếu");
}

let tuoi = 18;

if (tuoi >= 18) {
    let thongBao = "Bạn đã đủ tuổi trưởng thành.";
    console.log(thongBao);
}
console.log(thongBao); // Lỗi: thongBao is not defined

console.log(a); //  Lỗi: Cannot access 'a' before initialization
let a = 10;
console.log(a); // Kết quả: 10

let x = 5;
let x = 10; //  Lỗi: Identifier 'x' has already been declared

let y = 20;

if (true) {
    let y = 30; //  Không lỗi, vì biến này thuộc phạm vi khối {}
    console.log(y); // Kết quả: 30
}

console.log(y); // Kết quả: 20 (biến y bên ngoài không bị ảnh hưởng)