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 Array Const
ECMAScript 2015 (ES6)
in 2015, JavaScript added an important new keyword: const.
It has become a common practice to declare arrays using const:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p id=”demo”></p>
<script>
const cars = [“Saab”, “Volvo”, “BMW”];
document.getElementById(“demo”).innerHTML = cars;
</script>
</body>
</html>
Output
JavaScript const
Saab,Volvo,BMW
Cannot be Reassigned
An array defined with const 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:
TypeError: Assignment to constant variable.
Arrays are Not Constants
The keyword const is misleading.
It is not used to define a constant array. It specifies a constant reference to an array.
Elements Can be Reassigned
Changing the elements of a constant array:
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
Assigned when Declared
JavaScript const variables can be assigned a value when they are defined:
Meaning: An array declared using const can be initialized when it is defined.
Using const without initializing the array is a syntax error:
This will not work:
const cars;
cars = [“Saab”, “Volvo”, “BMW”];
Arrays defined with var can be initialized at any time.
Using the array before it is declared:
Example
This is OK:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p id=”demo”></p>
<script>
cars = [“Saab”, “Volvo”, “BMW”];
var cars
document.getElementById(“demo”).innerHTML = cars[0];
</script>
</body>
</html>
Output
JavaScript Hoisting
Saab
Const Block Scope
An array defined with const has Block Scope.
An array declared in a block is not the same as an array declared outside the block:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Declaring an Array Using const</h2>
<p id=”demo”></p>
<script>
const cars = [“Saab”, “Volvo”, “BMW”];
// Here cars[0] is “Saab”
{
const cars = [“Toyota”, “Volvo”, “BMW”];
// Here cars[0] is “Toyota”
}
// Here cars[0] is “Saab”
document.getElementById(“demo”).innerHTML = cars[0];
</script>
</body>
</html>
Output
Declaring an Array Using const
Saab
Redeclaring Arrays
Redeclaring an array defined with var is enabled anywhere in a program:
Example
var cars = [“Volvo”, “BMW”]; // Allowed
var cars = [“Toyota”, “BMW”]; // Allowed
cars = [“Volvo”, “Saab”]; // Allowed
Redeclaring or reassigning an array to const, in the same scope, or in the same block, is not permitted:
Example
var cars = [“Volvo”, “BMW”]; // Allowed
const cars = [“Volvo”, “BMW”]; // Not allowed
{
var cars = [“Volvo”, “BMW”]; // Allowed
const cars = [“Volvo”, “BMW”]; // Not allowed
}
Redeclaring or reassigning an existing const array, in the same scope, or in the same block, is not allowed:
Example
const cars = [“Volvo”, “BMW”]; // Allowed
const cars = [“Volvo”, “BMW”]; // Not allowed
var cars = [“Volvo”, “BMW”]; // Not allowed
cars = [“Volvo”, “BMW”]; // Not allowed
{
const cars = [“Volvo”, “BMW”]; // Allowed
const cars = [“Volvo”, “BMW”]; // Not allowed
var cars = [“Volvo”, “BMW”]; // Not allowed
cars = [“Volvo”, “BMW”]; // Not allowed
}
Redeclaring an array with const, in another scope, or in another block, is allowed:
Example
const cars = [“Volvo”, “BMW”]; // Allowed
{
const cars = [“Volvo”, “BMW”]; // Allowed
}
{
const cars = [“Volvo”, “BMW”]; // Allowed
}