JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
JavaScript Const
Cannot be Reassigned
A const variable cannot be reassigned:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p id=”demo”></p>
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById(“demo”).innerHTML = err;
}
</script>
</body>
</html>
Output
JavaScript const
Must be Assigned
JavaScript const variables should be assigned a value when they are declared:
Correct
const PI = 3.14159265359;
Incorrect
const PI;
PI = 3.14159265359;
Constant Objects and Arrays
The keyword const is a little misleading.
A constant value is not defined. It specifies a constant reference to a value.
Because of this you can NOT:
- Reassigning a constant value.
- Reassigning a constant array.
- Reassigning a constant object.
But you CAN:
- Changing the elements of constant array.
- Changing the properties of constant object.
- Constant Arrays.
Constant Arrays
The elements of a constant array can be changed:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>Declaring a constant array does NOT make the elements unchangeable:</p>
<p id=”demo”></p>
<script>
// Create an Array:
const cars = [“Saab”, “Volvo”, “BMW”];
// Change an element:
cars[0] = “Toyota”;
// Add an element:
cars.push(“Audi”);
// Display the Array:
document.getElementById(“demo”).innerHTML = cars;
</script>
</body>
</html>
Output
JavaScript const
Declaring a constant array does NOT make the elements unchangeable:
Toyota,Volvo,BMW,Audi
But the array cannot be reassigned:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>You can NOT reassign a constant array:</p>
<p id=”demo”></p>
<script>
try {
const cars = [“Saab”, “Volvo”, “BMW”];
cars = [“Toyota”, “Volvo”, “Audi”];
}
catch (err) {
document.getElementById(“demo”).innerHTML = err;
}
</script>
</body>
</html>
Output
JavaScript const
You can NOT reassign a constant array:
Constant Objects
The properties of a constant object can be changed:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>Declaring a constant object does NOT make the objects properties unchangeable:</p>
<p id=”demo”></p>
<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>
</body>
</html>
Output
JavaScript const
Declaring a constant object does NOT make the objects properties unchangeable:
Car owner is Johnson
The object cannot be reassigned :
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>You can NOT reassign a constant object:</p>
<p id=”demo”></p>
<script>
try {
const car = {type:”Fiat”, model:”500″, color:”white”};
car = {type:”Volvo”, model:”EX60″, color:”red”};
}
catch (err) {
document.getElementById(“demo”).innerHTML = err;
}
</script>
</body>
</html>
Output
JavaScript const
You can NOT reassign a constant object:
Block Scope
Declaring a variable with const is similar to let when used in Block Scope.
The x declared in the block, in this example, is not the same as the x declared outside the block:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScropt const variables has block scope</h2>
<p id=”demo”></p>
<script>
const x = 10;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10
document.getElementById(“demo”).innerHTML = “x is ” + x;
</script>
</body>
</html>
Output
JavaScropt const variables has block scope
x is 10
Redeclaring
Redeclaring a JavaScript var variable can be done anywhere in a program:
Example
var x = 2; // Allowed
var x = 3; // Allowed
x = 4; // Allowed
Redeclaring an existing var or let variable to const, in the same scope, is not allowed:
Example
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
const x = 2; // Not allowed
}
{
const x = 2; // Allowed
const x = 2; // Not allowed
}
Reassigning an existing const variable, in the same scope, is not allowed:
Example
const x = 2; // Allowed
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
const x = 2; // Not allowed
{
const x = 2; // Allowed
x = 2; // Not allowed
var x = 2; // Not allowed
let x = 2; // Not allowed
const x = 2; // Not allowed
}
Redeclaring a variable with const, in another scope, or in another block, is allowed:
Example
const x = 2; // Allowed
{
const x = 3; // Allowed
}
{
const x = 4; // Allowed
}
Const Hoisting
Variables specified with var are hoisted to the top and can be initialized at any time.
Meaning: Before declaring the variable, it can be used:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>var</b>, you can use a variable before it is declared:</p>
<p id=”demo”></p>
<script>
carName = “Volvo”;
document.getElementById(“demo”).innerHTML = carName;
var carName;
</script>
</body>
</html>
Output
JavaScript Hoisting
With var, you can use a variable before it is declared:
Volvo
Variables defined with const are also hoisted to the top, but not initialized.
Meaning: Using a const variable before it is declared will result in a ReferenceError:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p>With <b>const</b>, you cannot use a variable before it is declared:</p>
<p id=”demo”></p>
<script>
try {
alert(carName);
const carName = “Volvo”;
}
catch (err) {
document.getElementById(“demo”).innerHTML = err;
}
</script>
</body>
</html>
Output
JavaScript Hoisting
With const, you cannot use a variable before it is declared:
ReferenceError: Cannot access 'carName' before initialization