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>