ECMAScript 2015 (ES6)
in 2015, JavaScript introduced 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>
Result:
JavaScript const
Saab,Volvo,BMW
Cannot be Reassigned
An array declared 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>
Result:
JavaScript const
You can NOT reassign a constant array:
TypeError: Assignment to constant variable.
Arrays are Not Constants
The keyword const is a little misleading.
It does NOT define a constant array. It defines a constant reference to an array.
Because of this, we can still change the elements of a constant array.
Elements Can be Reassigned
You can change 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>
Result:
JavaScript const
Declaring a constant array does NOT make the elements unchangeable:
Toyota,Volvo,BMW,Audi
Browser Support
The const keyword is not supported in Internet Explorer 10 or earlier.
The following table defines the first browser versions with full support for the const keyword:
| Chrome 49 | IE 11 / Edge | Firefox 36 | Safari 10 | Opera 36 |
| Mar, 2016 | Oct, 2013 | Feb, 2015 | Sep, 2016 | Mar, 2016 |
Assigned when Declared
JavaScript const variables must be assigned a value when they are declared:
Meaning: An array declared with const must be initialized when it is declared.
Using const without initializing the array is a syntax error:
Example
This will not work:
const cars;
cars = [“Saab”, “Volvo”, “BMW”];
Arrays declared with var can be initialized at any time.
You can even use 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>
Result:
JavaScript Hoisting
Saab
Const Block Scope
An array declared 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>
Result:
Declaring an Array Using const
Saab
An array declared with var does not have block scope:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Declaring an Array Using const</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
// Here cars[0] is "Saab"
{
var cars = ["Toyota", "Volvo", "BMW"];
// Here cars[0] is "Toyota"
}
// Here cars[0] is "Toyota"
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
Result:
Declaring an Array Using const
Toyota
Redeclaring Arrays
Redeclaring an array declared with var is allowed 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 allowed:
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
}