JavaScript const keyword

Posted in /  

JavaScript const keyword

Vinay Khatri
Last updated on June 10, 2022

    Similar to let , the const keyword introduced to JavaScript in ECMAScript 2015. The const keyword follows similar features to the let but there are some differences that make const variables different from let variables. And in this tutorial, we will learn what a const keyword does in JavaScript.

    JavaScript const

    const is a variable declaration keyword, that is used to declare new variables in JavaScript. The const keyword is generally used when we want to create a variable which value we want to be constant through its block scope. We are saying block scope because the const keyword declares block scope level variables. Example

    const a=20, b=30, c=40;

    OR

    const a=20;
    const b= 30;
    const c= 40;

    The const variable declaration is different from other variables declarations such as var and let , because here we have to initialize the variable value during its declaration, else we receive a Syntax error. Example

    const x;      // Uncaught SyntaxError: Missing initializer in const declaration

    Constant variable reassign

    Actually the const keyword does not create a constant value, it just declares a read-only reference to the value and makes sure that the variable does not get reassigned. In short, the const keyword creates a constant reference variable that points to a value. However for primitive data types like numbers, booleans, and string its looks like const has created a constant value, but when you use cosnt with non-primitive data types like array and objects there you will see that the values of non-primitive data structure can be changed.

    <script>
        const a=20;
        a=40;  //error
    </script>

    As const creates a block scope variable we can declare a new const variable with the same name in different scope.

    <script>
        const a=20;
        if(a==20)
        {
            const a=40; //exclusive for if scope
            console.log(a); // 40
        }
        console.log(a); // 20
    </script>

    Output

    40
    20

    Constant objects and arrays

    As we know that const keyword-only create a constant variable name, which points to a value, and we can not assign the new value to an already declared constant. But when declare an array or object with cosnt keyword, we can change the values or properties of array and object. This is because the const keyword can only prevent us from reassigning a new value to the variable. But in the case of objects and arrays, we are not assigning new values to the variable, we are just changing the values of the array or object. Example 1

    <script>
    
        const a=[1,20,30,40];
        a[0] = 10   // changing array 1st element
        console.log(a); 
    </script>
    Output
    [10, 20, 30, 40]
    In the above example, we are not assigning a new value to the variable, instead, we assign a new value to the array object itself, to which the variable a is referencing or pointing.

    Example 2

    <script>
        const o={name:"Rahul", age:20}
        o.name = "Ravi";  //assing new name to object 
        console.log(o); 
    </script>
    Output
    {name: "Ravi", age: 20}

    Difference between let and const in JS

    Initialization of let variable during declaration is not mandatory Initialization of const variable during declaration is mandatory.

    <script>
        const x=20;  //declaration and initialization
        let y;  //declaration 
        y=20;   //initialization
    </script>

    The let variable can be reassigned. The const variable can not be reassigned.

    <script>
        const x=20;  
        let y =20;
        y=30;   //let reassinging
        x=30; //error
    </script>

    Summary

    • cosnt keyword is used to decalre a new constant variable for a block scope.
    • We can not reassign and redeclare a constant variable.
    • Initialization of const variable must be done during its declaration.

    People are also reading:

    Leave a Comment on this Post

    0 Comments