How To Use Const Keyword In JavaScript With Example

admin_img Posted By Bajarangi soft , Posted On 10-10-2020

In Java Script ES2015 introduced two important new JavaScript keywords: let and const.Variables defined with const behave like let variables, except they cannot be reassigned. so today we discuss about const keyword in java script

How To Use Const Keyword In JavaScript With Example

Example(1)

<script>
    try {
        const PI = 3.141592653589793;
        PI = 3.14;
    }
    catch (err) {
        document.getElementById("demo1").innerHTML = err;
    }
</script>


Block Scope:Declaring a variable with const is similar to let when it comes to Block Scope.The x declared in the block, in this example, is not the same as the x declared outside the block:
Example(2)

<script>
    //example 2
    var  x = 10;
    // Here x is 10
    {
        const x = 2;
        // Here x is 2
    }
    // Here x is 10
    document.getElementById("demo2").innerHTML = x;
</script>
 

Assigned when Declared

JavaScript const variables must be assigned a value when they are declared: 
Incorrect

const PI;
PI = 3.14159265359;

Correct
const PI = 3.14159265359;
 

Not Real Constants

The keyword const is misleading.It does NOT define a constant value. It defines a constant reference to a value.Because of this, we cannot change constant primitive values, but we can change the properties of constant objects.


Primitive Values

If we assign a primitive value to a constant, we cannot change the primitive value: 
Example(3)

<script>
    try {
        const PI = 3.141592653589793;
        PI = 3.14;
    }
    catch (err) {
        document.getElementById("demo").innerHTML = err;
    }
</script>
 

Constant Objects can Change

You can change the properties of a constant object:
Example(4)

<script>
    // Create an object:
    const car = {type:"Fiat", model:"500", color:"white"};

    // Change a property:
    car.color = "red";

    // Add a property:
    car.owner = "Johnson";

    // Display the property:
    document.getElementById("demo").innerHTML = "Car owner is " + car.owner;
</script>
 

But you can NOT reassign a constant object:

Example(5)

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR

Complete Code for Using Const Keyword In JavaScript With Example
 
<!DOCTYPE html>
<html>
<head>
    <title>How To Use Const Keyword In JavaScript With Examples</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    body{
        background: black;
    }
</style>
<body>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: White"> Use Const Keyword In JavaScript With Examples</h1>
    </div>
<br>
<br>

    <div class="well">
        <h2 id="demo1"></h2>
        <h2 id="demo2"></h2>
        <h2 id="demo3"></h2>
        <h2 id="demo4"></h2>

        <script>
            //example1
            try {
                const PI = 3.141592653589793;
                PI = 3.14;
            }
            catch (err) {
                document.getElementById("demo1").innerHTML = err;
            }
            //example 2
            var  x = 10;
            // Here x is 10
            {
                const x = 2;
                // Here x is 2
            }
            // Here x is 10
            document.getElementById("demo2").innerHTML = x;

            // Create an object:
            const car = {type:"Fiat", model:"500", color:"white"};

            // Change a property:
            car.color = "red";

            // Add a property:
            car.owner = "Johnson";

            // Display the property:
            document.getElementById("demo3").innerHTML = "Car owner is " + car.owner;
        </script>

    </div>
</div>
</body>
</html>

Related Post