JS Array Const

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

}