JS 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 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