ES6 brought forth the const keyword, which serves the purpose of declaring a new variable in JavaScript. Typically, the var keyword is utilized for variable declaration in JavaScript. The const keyword, however, is employed when you intend to establish a variable whose value should remain unchanged throughout the entirety of the program.
The distinction lies in the fact that the var keyword is utilized for the declaration of standard variables, which allows for their values to be modified. In contrast, a variable that is declared with the const keyword has a value that remains immutable and cannot be altered.
Const variable declaration/initialization
Below is the syntax or straightforward code for the declaration and initialization of a const variable.
Copy Code
<script>
const x = 16;
document.write("The value of const variable x = " + x);
</script>
Output
It will present the value stored in the constant variable x without encountering any errors.
The value of const variable x = 16
At this point, we will explore several characteristics associated with variables that are declared using the const keyword.
Properties
Following are the properties of const variable:
- Variable define using const keyword cannot be reassigned, or its value cannot be changed.
- The const variable must be initialized at the time of declaration with the variable name, e.g., const x=6;
- You cannot provide the value to the variable after declaration.
- The value of the const variable cannot be changed.
- The const variable has block scope. This means that a const variable within the same program can be reassigned by the same name and have different values in different blocks.
- A const variable cannot be hoisted, which means that a variable declared/initialized using var keyword cannot be reassigned using const .
- In JavaScript, const allows you to only modify the value of the array, but the reference to the array cannot be changed.
- The const variable creates only reference to the value.
- Object properties can be changed but the reference to an object cannot be changed.
Examples
In this section, we present various examples that demonstrate the practical application of different properties.
Example 1: This example will demonstrate that a variable declared with the const keyword cannot be reassigned.
Copy Code
<script>
const x = 16;
x = 23; //Type Error
</script>
Output
A type error will occur since reassigning a value to a constant variable is not permitted.
JavaScript error: Uncaught TypeError: Assignment to constant variable. on line 3
Example 2: In this instance, you will discover that the const variable possesses block scope.
Copy Code
<script>
const x = 16;
{
const x = 23;
document.write("Block2: x = " + x); //23
{
const x = 74;
document.write( "<br> Block3: x = " + x); //74
}
{
const x = 49;
document.write("<br> Block4: x = " + x); //49
}
}
document.write("<br> Block1: x = " + x); //16
</script>
Output
Executing the code provided above will not result in any errors. It will solely display the value of x from various blocks without encountering any syntax or type-related issues.
Block2: x = 23
Block3: x = 74
Block4: x = 49
Block1: x = 16
Example 3: In this instance, we will illustrate that a variable declared with the const keyword is not subject to hoisting.
Copy Code
<script>
x = 16;
document.write(x);
const x; //Syntax Error
</script>
Output
This will result in a syntax error as redeclaring a variable is prohibited.
JavaScript error: Uncaught SyntaxError: Missing initializer in const declaration on line 4
Example 4: This illustration will demonstrate that a const variable cannot be assigned a value after it has been declared.
Copy Code
<script>
const x;
x = 18; //Syntax Error
document.write(x);
</script>
Output
A syntax error will occur since initializing a const variable after its declaration is prohibited.
JavaScript error: Uncaught SyntaxError: Missing initializer in const declaration on line 2
Example 5: In JavaScript, the const keyword permits modifications to the contents of an array, yet it restricts any alterations to the array's reference itself.
Copy Code
<script type="text/javascript">
// initilize an const array
const nameArray = [" Aparna", " Manya", " Amayra", " Jahnavi"];
//display the value of array
document.write(nameArray.toString());
document.write("</br> </br>");
//change the value of array at index 2
nameArray [1] = " Krishna"; // possible
//Again, display the array with new values
document.write(nameArray.toString());
</script>
Output
In this instance, the name Manya has been substituted with Krishna. Despite the array being declared with the const keyword, it will still exhibit all the values contained within the array without encountering any errors on both occasions.
Aparna, Manya, Amayra, Jahanvi
Aparna, Krishna, Amayra, Jahanvi
Example 6: This illustration will demonstrate that the value of a const variable is immutable and cannot be altered or changed.
Copy Code
<script>
//declare and initialize an array of const
const employee = {
fname: "Annie",
lname: "Roy",
age: 22,
profession: "Web Developer"
};
document.write(employee);
// This can be done with const array
employee.fname = "Emmy";
employee.lname = "Jackson";
employee.Age = 24;
employee.profession = "QA Analyst";
document.write(employee);
// This cannot be possible with const array
/* const employee = {
"fname": "Emmy",
"lname": "Jackson",
"age": 24,
"profession": "QA Analyst"
} */
</script>
Output
In this instance, it is clear that you are unable to reassign the object values using the same identifier; however, you can modify the object values by utilizing their reference.
[object object] [object object]