JavaScript const Keyword

JavaScript const Keyword with Examples

In this article, I am going to discuss JavaScript const Keyword with Examples. Please read our previous article where we discussed JavaScript let Keyword in detail. At the end of this article, you will understand the what is JavaScript const keyword and when and how to use const keyword in JavaScript with examples.

JavaScript const Keyword

ES6 provides a new way of declaring a constant by using the const keyword. The const keyword creates a read-only reference to a value.

Syntax: const VARIABLE_NAME = value;

JavaScript const Keyword Properties:
  • A constant variable can be declared using the keyword const.
  • It must have an assignment with value.
  • Variable created by cost keyword are immutable that means we can’t change the value or reassign them with different values. Any attempt of re-assigning a const variable will result in JavaScript Type error.
  • Cannot be reassigned.
  • Block scope
  • It can be assign on the variable on declaration line.
  • The values inside the const array can be change, it can add new items to const arrays but it cannot reference to a new array.
  • Const object properties can be modified only reference to object cannot be changed.
  • Re-declaring of a const variable inside different block scope is allowed.
  • Cannot be Hoisted.
  • Creates read only reference to value.
Example to understand const keyword in JavaScript:

const height = 4;
height = 8; // TypeError: Assignment to constant variable.

The const keyword works like the let keyword. But the const keyword creates block-scoped variables whose values can’t be reassigned. The variables declared by the let keyword are mutual. It means that we can change their values anytime we want.

Example 1: It explains that the const variable cannot be reassigned.
<html>
<head>
    <title>JavaScript const variable cannot be reassigned example</title>
</head>
<body>
    <script type="text/javascript">
            const x = 12;
            x = 13;
            x += 1;
    </script>
</body>
</html>

Output:

const variable cannot be reassigned in javascript

Example 2: It explains the const variable which contains the Block Scope.
<html>
<head>
    <title>JavaScript const variable which contains the Block Scope example</title>
</head>
<body>
    <script type="text/javascript">
        const x = 22;
        {
            const x = 90;
            console.log(x);

            {
                const x = 77;
                console.log(x);
            }
            {
                const x = 45;
                console.log(x);
            }
        }
        console.log(x);
    </script>    
</body>
</html>

Output:

const variable which contains the Block Scope

Example 3: It explains the const variable and assigned it after declaration.
<html>
<head>
    <title>JavaScript const variable and assigned it after declaration example</title>
</head>
<body>
    <script type="text/javascript">
        const x;
        x = 12;
    </script>
</body>
</html>

Output:

JavaScript const variable and assigned it after declaration

Example 4: It explains the const variable cannot be Hoisted.
<html>
<head>
    <title>JavaScript const variable cannot be Hoisted example</title>
</head>
<body>
    <script type="text/javascript">
        x = 3;
        console.log(x);
        const x;
    </script>
</body>
</html>

 

Output:

JavaScript const variable cannot be Hoisted

Example 5: It explains that the array values can be modified only reference to array cannot be change.

<html>
<head>
    <title>JavaScript const array values can be modified only reference to array cannot be change.</title>
</head>
<body>
    <script type="text/javascript">
        // Changing the content of array is
        // possible in cost array
        const arr1 = ["Shagufta", "Javascript", "tutorial", "developer"];

        console.log(arr1.toString());

        arr1[2] = "web"; // possible

        console.log(arr1.toString());
    </script>
</body>
</html>

Output:

JavaScript const array values can be modified only reference to array cannot be change

Example 6: It explains that the object properties can be modified only reference to object cannot be changed.
<html>
<head>
    <title>JavaScript const object properties can be modified only reference to object cannot be changed.</title>
</head>
<body>
    <script type="text/javascript">
        const person = {
            first_name: "Shagufta",
            last_name: "Chaudhari",
            Age: 20,
            About: "Web Developer"
        };
        console.log(person);

        // It is possible
        person.first_name = "John";
        person.last_name = "Doe";
        person.Age = 22;
        person.About = "Commerce undergraduate";

        console.log(person);
            // it is not possible
            // const person={
            //     "first_name":"John",
            //     "last_name":"Doe",
            //     "Age":22,
            //     "About":"Commerce undergraduate"
            // }
    </script>
</body>
</html>

Output:

JavaScript const object properties can be modified only reference to object cannot be changed

Declaring Variables in JavaScript:

To declare a variable in JavaScript, any of these three keywords can be used along with a variable name:

  • var is used in pre-ES6 versions of JavaScript.
  • let is the preferred way to declare a variable when it can be reassigned.
  • const is the preferred way to declare a variable with a constant value.

Example:

var name;
let height;
const age = 20;

The Lifetime of JavaScript Variables:

The Lifetime of a JavaScript variable started when it is declared

  1. Local variables are deleted when the function is completed.
  2. Global variables are deleted when we close the page

In the next article, I am going to discuss JavaScript Output with examples. Here, in this article, I try to explain JavaScript const Keyword with examples. I hope this article will helps you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

Leave a Reply

Your email address will not be published. Required fields are marked *