JavaScript Const

ES6 introduced the const keyword, which is used to define a new variable in JavaScript. Generally, the var keyword is used to declare a JavaScript variable. Const is another keyword to declare a variable when you do not want to change the value of that variable for the whole program.

The difference is just that var is for normal variable declaration whose value can be changed, whereas a variable value declared using const keyword cannot be changed.

Const variable declaration/initialization

Following is the syntax or simple code for const variable declaration and initialization.

Copy Code

<script>
     const x = 16;
     document.write("The value of const variable x = " + x);
</script>

Test it Now

Output

It will display the value of the const variable x without any error.

The value of const variable x = 16

Now, we will discuss some properties of the variables defined using const.

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

Here, we have some examples for different properties explanation practically.

Example 1: With the help of this example, you will see that the const variable cannot be reassigned.

Copy Code

<script>
     const x = 16;
     x = 23;      //Type Error
</script>

Test it Now

Output

It will generate a type error because it is not possible to reassign the value to a constant variable.

JavaScript error: Uncaught TypeError: Assignment to constant variable. on line 3

Example 2: In this example, you will learn that the const variable contains 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>

Test it Now

Output

There will be no error by executing the above code. It will just print the value of x of different blocks without any syntax or type error.

Block2: x = 23
Block3: x = 74
Block4: x = 49
Block1: x = 16

Example 3: This example will describe that the const variable cannot be hoisted.

Copy Code

<script>
     x = 16;
     document.write(x);
     const x;     //Syntax Error
</script>

Test it Now

Output

It will generate a syntax error because redeclaration of a variable is not allowed.

JavaScript error: Uncaught SyntaxError: Missing initializer in const declaration on line 4

Example 4: This example will show you that the const variable cannot be initialized after declaration.

Copy Code

<script>
     const x;
     x = 18;    //Syntax Error
     document.write(x);
</script>

Output

It will generate a syntax error because initialization is not allowed after the declaration of const variable.

JavaScript error: Uncaught SyntaxError: Missing initializer in const declaration on line 2

Example 5: In JavaScript, const allows you to only modify the value of the array, but the reference to the array cannot be changed.

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

Here, you can see the Manya name has been replaced by Krishna. Although the array was declared using const keyword. So, it will display all values of the array without any error both times.

Aparna, Manya, Amayra, Jahanvi
Aparna, Krishna, Amayra, Jahanvi

Example 6: In this example, we will show you that the const variable value cannot be changed or modified.

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

Here, you can see that you cannot reinitialize the object values by the same name, but the object values can be changed by using their reference.