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;
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:
const car = {type:"Fiat", model:"500", color:"white"}; car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR
<!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>