JAVASCRIPT const Variables
JAVASCRIPT
Using the const keyword, JavaScript can create a fixed value called a constant, the value of the constant always remains the same.
JavaScript Constant variables
➔ JavaScript uses constant references for immutable data and therefore modification is not allowed.
➔ Constant reference ensures that the value behaves like a read-only variable and no assignment is allowed.
Key features of const in JavaScript:
No Reassignment
➔ A variable of constant type cannot be changed during application runtime. The constant type date takes its value only at initialization time.
➔ Doing this will result in a TypeError.
For object
const name = "David";
name = "Brown"; // Error: Assignment to constant variable.
JavaScript const reassignment error
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript const example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript const example</h3>
<p id="demo"></p>
<script>
/* TypeError: Assignment to constant variable. */
try {
const name = "David";
name = "Brown";
} catch (err) {
document.getElementById("demo").textContent = err;
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Must be initialized
➔ A constant cannot be in an undefined state, so the developer must ensure that the constant has a value assigned.
➔ If a constant is mistakenly not assigned an initial value, an error such as SyntaxError will occur. So the developer must be aware of doing constant initialization.
For object
const name; // Error: Missing initializer in const declaration.
JavaScript const initialization error
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript const example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript const example</h3>
<p id="demo"></p>
<script>
/* SyntaxError: Missing initializer in const declaration */
/* Check console in developer tools to see syntax errors*/
try {
const name;
} catch (err) {
document.getElementById("demo").textContent = err;
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Reference Binding (Immutable Binding)
➔ If we want to define a constant of type JavaScript object or array, JavaScript binds a constant reference (immutable binding) to the object itself. So new assignments are not possible but the object's properties or array values can be changed without any problems.
➔ Remember: Constants of primitive types (e.g. number, string, boolean) are inherently immutable, so the value cannot be changed. However, object properties and array values can still be changed.
For object
const student = { name: "James", age: 20 };
student.name = "John"; // object's property can change.
student.age = 22; // object's property can change.
student = { name: "Olivia", age: 18 }; // Error: Assignment to constant variable reference
For array
const demoarr = [1,2,3,4];
demoarr[2]= 4 // array's element can change.
demoarr[3] = 8; // array's element can change.
demoarr = [10,20,30]; // Error: Assignment to constant variable reference
JavaScript const object/array
Example
<!DOCTYPE html>
<html>
<head>
<title>JavaScript const object/array example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<h3>JavaScript const object/array example</h3>
<p id="demo"></p>
<script>
/* TypeError: Assignment to constant variable. */
/* Check console in developer tools to see syntax errors*/
try {
const student = { name: "James", age: 20 };
student.name = "John"; // object's property can change.
student.age = 22; // object's property can change.
student = { name: "Olivia", age: 18 }; // Error: Assignment to constant variable reference
const demoarr = [1, 2, 3, 4];
demoarr[2] = 4 // array's element can change.
demoarr[3] = 8; // array's element can change.
demoarr = [10, 20, 30]; // Error: Assignment to constant variable reference
} catch (err) {
document.getElementById("demo").textContent = err;
}
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.
let vs const keywords for declaration in JavaScript
| Keyword | Scope | Reassignment | Redeclaration | Description |
|---|---|---|---|---|
| let | Block-scoped | Allowed | Not allowed | The standard and recommended way to declare a variable whose value may change. |
| const | Block-scoped | Not allowed | Not allowed | The standard and recommended way to declare a constant type variable whose value cannot be changed after initialisation. |