Tổng quan.
Const trong JavaScript được sử dụng để khai báo biến với giá trị không thay đổi (immutable).
Dưới đây là một tổng quan về const:
- Biến không thay đổi: Biến được khai báo bằng
constkhông thể thay đổi giá trị sau khi chúng đã được gán một giá trị ban đầu. Điều này làm choconstthích hợp để khai báo các hằng số và giá trị không thay đổi trong code. - Phạm vi biến cục bộ: Giống như
let, biến được khai báo bằngconstcũng có phạm vi biến cục bộ (block scope), chỉ có thể truy cập được từ bên trong khối mà chúng được khai báo. - Không thể khai báo lại: Tương tự như
let, bạn không thể khai báo lại một biến đã được khai báo bằngconsttrong cùng một phạm vi. - Không được khởi tạo tự động: Biến được khai báo bằng
constkhông tự động khởi tạo với giá trị mặc định và phải được gán giá trị ngay khi khai báo. - Không hoisted: Biến
constkhông được hoisted và không thể sử dụng trước khi nó được khai báo trong code. - Sử dụng cho hằng số và giá trị không thay đổi:
constthường được sử dụng để khai báo hằng số và các giá trị không thay đổi trong code, như các giá trị cố định, các định danh (identifiers) hoặc các giá trị được tính toán một lần và không được thay đổi sau đó. - Lưu ý về đối tượng và mảng: Dùng
constđể khai báo biến cho đối tượng (object) hoặc mảng (array) không có nghĩa rằng bạn không thể thay đổi nội dung của chúng. Bạn vẫn có thể thay đổi thuộc tính hoặc phần tử của đối tượng hoặc mảng, nhưng bạn không thể gán lại biến cho một đối tượng hoặc mảng mới.
Khi nào thì nên sử dụng const?
Bạn nên sử dụng const khi bạn biết rằng giá trị của biến không nên thay đổi sau khi đã được gán giá trị ban đầu. Dưới đây là những trường hợp bạn nên sử dụng const:
- Khi khai báo một mảng mới: Sử dụng
constkhi bạn khai báo một mảng mới mà bạn không kỳ vọng thay đổi cấu trúc của mảng. - Khi khai báo một đối tượng mới: Sử dụng
constkhi bạn khai báo một đối tượng mới mà bạn không kỳ vọng thay đổi thuộc tính của đối tượng. - Khi khai báo một hàm mới: Sử dụng
constkhi bạn khai báo một hàm mới và không kỳ vọng thay đổi hàm đó sau đó. - Khi khai báo một biểu thức chính quy (RegExp) mới: Sử dụng
constkhi bạn khai báo một biểu thức chính quy và không kỳ vọng thay đổi biểu thức đó sau đó.
Lưu ý rằng, mặc dù const được gọi là hằng số, thực tế nó định nghĩa một tham chiếu hằng số đến một giá trị. Điều này có nghĩa là bạn không thể gán lại giá trị của biến const nhưng bạn có thể thay đổi các phần tử của một mảng const hoặc các thuộc tính của một đối tượng const.
Một biến được khai báo bằng const trong JavaScript không thể được gán lại giá trị sau khi đã được gán giá trị ban đầu.
Điều này làm cho biến trở thành một hằng số và không thể thay đổi giá trị của nó sau khi đã được định nghĩa.
const PI = 3.141592653589793;
PI = 3.14; // Điều này sẽ gây ra lỗi
PI = PI + 10; // Điều này cũng sẽ gây ra lỗiVí dụ với HTML.
<html>
<body>
<p id="demo"></p>
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>Trong ví dụ trên, biến PI được khai báo bằng const và được gán giá trị là 3.141592653589793. Sau đó, cố gắng gán lại giá trị của PI bằng 3.14 hoặc cộng thêm 10 vào PI đều sẽ gây ra lỗi vì PI đã được khai báo với const và không thể thay đổi sau đó.
TypeError: Assignment to constant variable.Bạn không thể gán lại một mảng const bằng một mảng mới bằng cách sử dụng =.
Trong JavaScript, khi bạn sử dụng const để khai báo một mảng, điều đó có nghĩa là bạn không thể gán lại một giá trị khác cho mảng đó (tức là không thể thay đổi mảng thành một mảng khác hoàn toàn). Tuy nhiên, bạn vẫn có thể thay đổi các phần tử bên trong mảng và thêm mới các phần tử vào mảng đó. Điều này gọi là “immutable array” (mảng không thể thay đổi).
Ví dụ:
const cars = ["Saab", "Volvo", "BMW"];
// Bạn có thể thay đổi một phần tử trong mảng
cars[0] = "Toyota"; // Mảng cars giờ có ["Toyota", "Volvo", "BMW"]
// Bạn có thể thêm một phần tử mới vào mảng
cars.push("Audi"); // Mảng cars giờ có ["Toyota", "Volvo", "BMW", "Audi"]Lưu ý rằng mảng vẫn được giữ nguyên (không thay đổi đối tượng mảng chính), chỉ các phần tử bên trong mảng thay đổi.
Ví dụ với HTML.
<html>
<body>
<p id="demo"></p>
<script>
// Create an Array:
const cars = ["Saab", "Volvo", "BMW"];
// Change an element:
cars[0] = "Toyota";
// Add an element:
cars.push("Audi");
// Display the Array:
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>Kết quả.
Toyota,Volvo,BMW,AudiBạn không thể gán lại một mảng mới cho biến đã được khai báo với const. Điều này làm cho biến không thể thay đổi (immutable).
Dưới đây là ví dụ minh họa:
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // Lỗi: Bạn không thể gán lại biến cars với một mảng mớiKhi bạn sử dụng const để khai báo một biến, bạn chỉ có thể thay đổi các thành phần bên trong biến đó, như thay đổi giá trị của các phần tử trong mảng, nhưng bạn không thể gán lại biến với một giá trị hoàn toàn mới.
Khi bạn sử dụng const để khai báo một đối tượng, bạn vẫn có thể thay đổi các thuộc tính của đối tượng đó, bao gồm cả việc thay đổi giá trị của các thuộc tính hoặc thêm mới các thuộc tính vào đối tượng.
Điều này không gây ra lỗi, như trong ví dụ sau:
const car = {type:"Fiat", model:"500", color:"white"};
// Bạn có thể thay đổi một thuộc tính của đối tượng:
car.color = "red";
// Bạn có thể thêm một thuộc tính mới vào đối tượng:
car.owner = "Johnson";Ví dụ với HTML.
<html>
<body>
<p id="demo"></p>
<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};
// Change a property:
car.color = "red";
// Add a property:
car.owner = "Johnson";
// Display the property:
document.getElementById("demo").innerHTML = "Car owner is " + car.owner;
</script>
</body>
</html>Kết quả.
Car owner is JohnsonTuy nhiên, bạn không thể gán lại đối tượng const bằng một đối tượng mới bằng cách sử dụng =. Điều này sẽ gây ra lỗi, như trong ví dụ sau:
const car = {type:"Fiat", model:"500", color:"white"};
// Bạn không thể gán lại đối tượng:
car = {type:"Volvo", model:"EX60", color:"red"}; // LỖIVí dụ với HTML.
<html>
<body>
<p id="demo"></p>
<script>
try {
const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>Kết quả.
TypeError: Assignment to constant variable.Khi sử dụng const cho đối tượng, bạn không thể thay đổi tham chiếu đến đối tượng đó, nhưng bạn vẫn có thể thay đổi nội dung của đối tượng.
Khi bạn khai báo một biến với const, cách hoạt động của nó liên quan đến Block Scope cũng tương tự như let.
Biến x được khai báo trong khối (block), như trong ví dụ này, không giống với biến x được khai báo bên ngoài khối:
<html>
<body>
<p id="demo"></p>
<script>
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = "x is " + x;
</script>
</body>
</html>Điều này có nghĩa là biến x được khai báo trong khối chỉ có hiệu lực (hoặc có thể truy cập) trong phạm vi của khối đó và không ảnh hưởng đến biến x bên ngoài khối.
Và đây là kết quả.
x is 10Khi sử dụng var, bạn có thể khai báo lại biến bất kỳ ở bất kỳ nơi nào trong chương trình.
var x = 2; // Được phép
var x = 3; // Được phép
x = 4; // Được phépTuy nhiên, khi bạn đã khai báo một biến bằng var hoặc let trong cùng phạm vi (scope), bạn không thể gán lại biến đó bằng const:
var x = 2; // Được phép
const x = 2; // Không được phép
{
let x = 2; // Được phép
const x = 2; // Không được phép
}
{
const x = 2; // Được phép
const x = 2; // Không được phép
}Tương tự, bạn không thể gán lại biến const trong cùng phạm vi:
const x = 2; // Được phép
x = 2; // Không được phép
var x = 2; // Không được phép
let x = 2; // Không được phép
const x = 2; // Không được phép
{
const x = 2; // Được phép
x = 2; // Không được phép
var x = 2; // Không được phép
let x = 2; // Không được phép
const x = 2; // Không được phép
}Tuy nhiên, bạn có thể khai báo lại một biến bằng const trong một phạm vi (scope) khác hoặc trong một khối (block) khác:
const x = 2; // Được phép
{
const x = 3; // Được phép
}
{
const x = 4; // Được phép
}Nhưng biến x trong mỗi phạm vi hoặc khối sẽ có hiệu lực trong phạm vi hoặc khối đó, không ảnh hưởng đến biến x ở phạm vi hoặc khối khác.
Trong JavaScript, biến được khai báo bằng var sẽ được đưa lên đầu phạm vi (hoisted) và có thể được khởi tạo bất kỳ lúc nào.
Điều này có nghĩa là bạn có thể sử dụng biến trước khi nó được khai báo, như trong ví dụ sau:
carName = "Volvo";
var carName; // Biến carName được khai báo sau khi đã sử dụngVí dụ với HTML.
<html>
<body>
<p id="demo"></p>
<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>
</body>
</html>Kết quả.
VolvoTrong ví dụ này, biến carName được gán giá trị "Volvo" trước khi nó được khai báo bằng var. JavaScript sẽ tự động đưa biến carName lên đầu phạm vi, cho phép bạn sử dụng nó trước khi khai báo.
Tuy nhiên, điều này có thể gây ra sự nhầm lẫn và làm cho mã nguồn khó đọc và hiểu. Vì vậy, việc sử dụng let hoặc const mà không cho phép hoisting, thường được khuyến nghị hơn để tạo mã nguồn dễ đọc và dễ quản lý hơn.
Trong JavaScript, biến được khai báo bằng const cũng được đưa lên đầu phạm vi (hoisted), nhưng không được khởi tạo giá trị ban đầu.
Điều này có nghĩa là nếu bạn sử dụng một biến const trước khi nó được khai báo, bạn sẽ gặp lỗi “ReferenceError” như trong ví dụ sau:
alert(carName); // Lỗi: ReferenceError
const carName = "Volvo"; // Khai báo biến carName sau khi đã sử dụngVí dụ với HTML.
<html>
<body>
<p id="demo"></p>
<script>
try {
alert(carName);
const carName = "Volvo";
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>Kết quả.
ReferenceError: Cannot access 'carName' before initializationTrong ví dụ này, chúng ta gọi alert(carName) trước khi biến carName được khai báo bằng const, nên JavaScript sẽ lỗi “ReferenceError” vì không thể tìm thấy biến carName trước khi nó được khai báo.
Lưu ý rằng việc sử dụng let cũng giúp bạn tránh lỗi này bằng cách không cho phép sử dụng biến trước khi nó được khai báo.
