Sử dụng const để khai báo biến cố định trong JavaScript

const PI = 3.14159;
console.log(PI); // 3.14159
PI = 3.14; // Lỗi: Assignment to constant variable.

Trong đoạn mã trên, sau khi khai báo PI với từ khóa const, nếu chúng ta cố gắng thay đổi giá trị của nó, JavaScript sẽ báo lỗi.

Tại sao cần sử dụng const để khai báo biến cố định?

Bảo vệ dữ liệu quan trọng khỏi sự thay đổi ngoài ý muốn

• Khi sử dụng const, chúng ta có thể chắc chắn rằng giá trị của biến không bị thay đổi ngoài mong đợi, giúp chương trình hoạt động ổn định hơn.
• Điều này đặc biệt quan trọng khi làm việc với các giá trị không thay đổi, chẳng hạn như các hằng số (constant values).

Cải thiện hiệu suất và tối ưu hóa bộ nhớ

• Trình biên dịch JavaScript có thể tối ưu hóa mã tốt hơn khi biết rằng một biến sẽ không thay đổi giá trị.

Giúp mã nguồn dễ đọc và bảo trì hơn

• Khi nhìn vào một biến được khai báo bằng const, lập trình viên sẽ hiểu rằng giá trị của biến đó là cố định và không thể thay đổi, giúp tránh nhầm lẫn trong khi viết code.

Hạn chế lỗi do vô tình thay đổi giá trị biến

• Nếu một biến chỉ nên chứa một giá trị cố định nhưng lại khai báo bằng let hoặc var, có thể vô tình bị gán lại giá trị mới, dẫn đến lỗi logic trong chương trình.

Sự khác biệt giữa const, let và var trong JavaScript

Ví dụ minh họa sự khác biệt giữa const, let và var:

// 1. const - Không thể gán lại giá trị
const name = "John";
name = "Doe"; //  Lỗi: Assignment to constant variable.

// 2. let - Có thể gán lại giá trị
let age = 25;
age = 26; // Hợp lệ

// 3. var - Cũng có thể gán lại giá trị
var city = "New York";
city = "Los Angeles"; // Hợp lệ

Sự khác biệt về phạm vi (scope)

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

Cú pháp khai báo biến sử dụng const

Trong JavaScript, để khai báo một biến có giá trị cố định, chúng ta sử dụng từ khóa const. Cú pháp như sau:

const tenBien = giaTri;

• tenBien: Tên của biến.
• giaTri: Giá trị được gán cho biến.
• Lưu ý: Biến khai báo bằng const phải được gán giá trị ngay lập tức, nếu không sẽ báo lỗi.

Ví dụ minh họa đơn giản

const PI = 3.14159;
console.log(PI); // Output: 3.14159

Đặc điểm của biến const

Giá trị của biến const không thể thay đổi sau khi gán

Một khi biến được khai báo bằng const, chúng ta không thể thay đổi giá trị của nó. Nếu cố gắng gán lại giá trị, JavaScript sẽ báo lỗi.

Ví dụ:

const number = 10;
number = 20; //  Lỗi: Assignment to constant variable.

const phải được gán giá trị ngay khi khai báo

Không giống như let hoặc var, biến const bắt buộc phải có giá trị ngay tại thời điểm khai báo. Nếu không, JavaScript sẽ báo lỗi.

Ví dụ lỗi:

const message; // Lỗi: Missing initializer in const declaration
message = "Hello"; 

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

• const có phạm vi khối (block scope), nghĩa là nó chỉ tồn tại trong {} nơi nó được khai báo.
• Nếu khai báo const bên trong một khối {}, thì biến đó chỉ có thể được truy cập bên trong khối đó.

Ví dụ:

{
    const greeting = "Hello, world!";
    console.log(greeting); // Hợp lệ: "Hello, world!"
}
console.log(greeting); // Lỗi: greeting is not defined

Trong ví dụ trên, biến greeting chỉ tồn tại bên trong khối {} và không thể truy cập bên ngoài.

const với các kiểu dữ liệu phức tạp (Arrays, Objects)

Đối với mảng (array) và đối tượng (object), dù không thể thay đổi tham chiếu của biến const, chúng ta vẫn có thể thay đổi nội dung bên trong.

Ví dụ với mảng (array):

const numbers = [1, 2, 3];
numbers.push(4); //  Hợp lệ
console.log(numbers); // Output: [1, 2, 3, 4]

numbers = [10, 20]; // Lỗi: Assignment to constant variable.

Trong ví dụ trên:

• Chúng ta có thể thêm phần tử vào mảng numbers.
• Nhưng không thể gán lại một mảng mới cho biến numbers.

Ví dụ với đối tượng (object):

const person = { name: "John", age: 25 };
person.age = 30; // Hợp lệ
console.log(person); // Output: { name: "John", age: 30 }

person = { name: "Alice", age: 22 }; //  Lỗi: Assignment to constant variable.

• Chúng ta có thể thay đổi thuộc tính của đối tượng person.
• Nhưng không thể gán lại một đối tượng mới cho biến person.

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

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

Trong JavaScript, biến khai báo bằng const có phạm vi khối (block scope). Điều này có nghĩa là biến const chỉ tồn tại bên trong cặp dấu {} nơi nó được khai báo. Nếu cố gắng truy cập biến const bên ngoài khối {}, JavaScript sẽ báo lỗi.

Ví dụ minh họa

{
    const message = "Hello, World!";
    console.log(message); //  Hợp lệ: "Hello, World!"
}
console.log(message); //  Lỗi: message is not defined

Trong ví dụ trên:

• message chỉ tồn tại bên trong khối {}.
• Khi cố gắng truy cập message bên ngoài khối, JavaScript báo lỗi: message is not defined.

So sánh const, let, và var về phạm vi hoạt động

So sánh chi tiết:

const và let có phạm vi hoạt động giống nhau (phạm vi khối - block scope).

var có phạm vi hàm (function scope), nghĩa là nó không bị giới hạn trong {} mà vẫn có thể truy cập bên ngoài nếu không nằm trong một hàm.

const không thể gán lại giá trị, trong khi let và var có thể thay đổi giá trị sau khi khai báo.

Hoisting:

• var được hoisted lên đầu và có thể sử dụng trước khi khai báo, nhưng giá trị mặc định là undefined.
• let và const cũng được hoisted, nhưng nếu sử dụng trước khi khai báo sẽ báo lỗi (Temporal Dead Zone).

Ví dụ minh họa so sánh const, let, var

function testScope() {
    if (true) {
        var x = "I am var";
        let y = "I am let";
        const z = "I am const";
    }
    console.log(x); //  Hợp lệ: "I am var" (var có function scope)
    console.log(y); //  Lỗi: y is not defined (let có block scope)
    console.log(z); //  Lỗi: z is not defined (const có block scope)
}
testScope();

Giải thích:

• var x có phạm vi hàm (function scope), nên vẫn có thể truy cập được bên ngoài khối {}.
• let y và const z có phạm vi khối (block scope), nên không thể truy cập bên ngoài {}.

^{Ví dụ so sánh var, let, và const trong vòng lặp}

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000);
}
// Output: 3, 3, 3 (do var không có block scope)

for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log(j), 1000);
}
// Output: 0, 1, 2 (do let có block scope)

• Với var, biến i không có phạm vi khối, dẫn đến cả ba hàm setTimeout đều truy cập cùng một biến i cuối cùng là 3.
• Với let, mỗi lần lặp tạo một biến j mới trong phạm vi khối, nên kết quả in ra lần lượt 0, 1, 2.

Sử dụng const trong JavaScript

Khai báo và gán giá trị cho biến const

• const được sử dụng để khai báo biến có giá trị cố định, tức là sau khi gán giá trị ban đầu, không thể gán lại giá trị mới.
• const có thể lưu trữ các kiểu dữ liệu như số, chuỗi, mảng, và đối tượng.

Ví dụ minh họa với số và chuỗi

const PI = 3.14159; 
const message = "Hello, JavaScript!";

console.log(PI);      // Output: 3.14159
console.log(message); // Output: Hello, JavaScript!

// Thử gán lại giá trị sẽ gây lỗi
// PI = 3.14; //  Lỗi: Assignment to constant variable
// message = "New message"; //  Lỗi

Ghi nhớ: Biến const phải được gán giá trị ngay khi khai báo.

Ví dụ minh họa với mảng (Array)

const numbers = [1, 2, 3, 4, 5];

console.log(numbers); // Output: [1, 2, 3, 4, 5]

// Thử gán lại toàn bộ mảng sẽ gây lỗi
// numbers = [10, 20, 30]; //  Lỗi: Assignment to constant variable

// Tuy nhiên, có thể thay đổi nội dung bên trong mảng
numbers.push(6);
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

Ghi nhớ: Không thể thay đổi const numbers, nhưng có thể thay đổi nội dung bên trong mảng.

Ví dụ với đối tượng (Object)

const person = { name: "Alice", age: 25 };

console.log(person); // Output: { name: "Alice", age: 25 }

// Thử gán lại toàn bộ object sẽ gây lỗi
// person = { name: "Bob", age: 30 }; //  Lỗi: Assignment to constant variable

// Tuy nhiên, có thể thay đổi thuộc tính bên trong object
person.age = 26;
console.log(person); // Output: { name: "Alice", age: 26 }

Ghi nhớ: Không thể thay đổi const person, nhưng có thể thay đổi thuộc tính bên trong object.

Sử dụng const vòng lặp trong JavaScript

• Trong vòng lặp, const có thể được sử dụng khi giá trị không thay đổi trong mỗi lần lặp.
• Nếu biến cần thay đổi trong mỗi lần lặp, sử dụng let thay vì const.

Ví dụ const trong forEach() (Không thay đổi biến)

const numbers = [10, 20, 30];

numbers.forEach((num) => {
    console.log(num); // Hợp lệ: In ra từng số trong mảng
});

Vì num chỉ được đọc và không thay đổi giá trị, const hoạt động tốt.

Ví dụ const trong for (Lỗi khi thay đổi biến)

for (const i = 0; i < 3; i++) {
    console.log(i); // Lỗi: Assignment to constant variable
}

Ghi nhớ: Không thể dùng const cho biến thay đổi (i++), nên thay bằng let.

Sử dụng const trong câu lệnh điều kiện (if, else if, else)

• Biến khai báo bằng const có thể được sử dụng trong các câu lệnh điều kiện nếu giá trị của nó không thay đổi.

Ví Dụ const Trong if

const age = 18;

if (age >= 18) {
    console.log("Bạn đủ tuổi để lái xe."); //  Hợp lệ
} else {
    console.log("Bạn chưa đủ tuổi để lái xe.");
}

Hợp lệ vì age không thay đổi.

Ví dụ const với nhiều điều kiện

const username = "admin";
const password = "123456";

if (username === "admin" && password === "123456") {
    console.log("Đăng nhập thành công!"); //  Hợp lệ
} else {
    console.log("Sai tên đăng nhập hoặc mật khẩu!");
}

Hợp lệ vì username và password không thay đổi.

Lỗi thường gặp khi sử dụng const trong JavaScript

Khai báo const mà không gán giá trị

Khi khai báo biến const, bắt buộc phải gán giá trị ngay lập tức.

const name; //  Lỗi: Missing initializer in const declaration
name = "Alice"; // Không hợp lệ

Cách đúng: Sử dụng let nếu cần thay đổi giá trị.

let radius = 5;
radius = 10; // Hợp lệ

Hiểu sai về việc thay đổi nội dung của đối tượng/Mảng const

Mảng (Array) và Đối tượng (Object) khai báo bằng const có thể thay đổi nội dung, nhưng không thể thay đổi chính nó.

Ví Dụ Gây Lỗi

const fruits = ["Apple", "Banana"];
fruits = ["Mango", "Orange"]; //  Lỗi: Assignment to constant variable

Cách đúng:

fruits.push("Mango"); // Hợp lệ
console.log(fruits); // Output: ["Apple", "Banana", "Mango"]

Kết bài

Việc sử dụng const trong JavaScript giúp lập trình viên quản lý biến một cách an toàn và hiệu quả hơn. Bằng cách ngăn chặn việc gán lại giá trị, const giúp tránh được nhiều lỗi không mong muốn, đặc biệt trong các chương trình phức tạp. Ngoài ra, với phạm vi khối (block scope), const giúp giữ cho mã nguồn rõ ràng, dễ hiểu và bảo đảm tính toàn vẹn của dữ liệu.

Tuy nhiên, cần hiểu rõ rằng const không làm cho mảng hoặc đối tượng trở thành bất biến, mà chỉ đảm bảo rằng tham chiếu đến chúng không thể thay đổi. Do đó, lập trình viên vẫn có thể thay đổi nội dung bên trong của mảng hoặc đối tượng nếu cần.

Tóm lại, nếu một giá trị không cần thay đổi trong suốt quá trình thực thi, hãy ưu tiên sử dụng const để tăng tính bảo mật, tối ưu hóa hiệu suất và viết code dễ bảo trì hơn.