JS Const

JavaScript const, introduced in ES6 (2015), declares variables with block scope that cannot be reassigned or redeclared within the same scope once initialized.

Cannot be Reassigned

Variables declared with the const keyword in JavaScript are immutable; once assigned, their value cannot be changed.

Example

const PI = 3.141592653589793; PI = 3.14;      // This will give an error PI = PI + 10;   // This will also give an error

Must be Assigned

In JavaScript, const variables necessitate initialization with a value at the time of declaration.

Correct

const PI = 3.14159265359;

InCorrect

const PI; PI = 3.14159265359;

When to use JavaScript const? Always utilize const when you’re certain that a variable’s value should remain unchanged. Use const when declaring: A new Array A new Object A new Function A new RegExp

Constant Objects and Arrays

The const keyword in JavaScript is somewhat misleading.

It doesn’t define a value that’s constant, but rather a reference to a value that can’t be reassigned.

Because of this, you cannot:

• Reassign a constant value
• Reassign a constant array
• Reassign a constant object

However, you can:

• Change the elements of a constant array
• Change the properties of a constant object

Constant Arrays

It’s possible to alter the elements of a constant array.

// You can create a constant array: const cars = [“Saab”, “Volvo”, “BMW”]; // You can change an element: cars[0] = “Toyota”; // You can add an element: cars.push(“Audi”);

However, you cannot assign a new array to the constant variable.

Example

const cars = [“Saab”, “Volvo”, “BMW”]; cars = [“Toyota”, “Volvo”, “Audi”];    // ERROR

Constant Objects

You’re able to modify the properties of a constant object.

Example

// You can create a const object: const car = {type:“Fiat”, model:“500”, color:“white”}; // You can change a property: car.color = “red”; // You can add a property: car.owner = “Johnson”;

However, you cannot assign a new object to the constant variable.

Example

const car = {type:“Fiat”, model:“500”, color:“white”}; car = {type:“Volvo”, model:“EX60”, color:“red”};    // ERROR

Difference Between var, let and const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

What is Good?

let and const exhibit block scope, disallow redeclaration, and require declaration before usage. They also does not bind to this and lack hoisting.

What is Not Good?

Variables declared with var do not require explicit declaration, they are hoisted, and they bind to this.

Browser Support

The let and const keywords lack support in Internet Explorer 11 or earlier versions.

The table below indicates the initial browser versions providing complete support:

Block Scope

Declaring a variable with const behaves similarly to let in terms of block scope.

In this example, the variable x declared within the block is distinct from the x declared outside the block:

Example

const x = 10; // Here x is 10 {  const x = 2; // Here x is 2 } // Here x is 10

Redeclaring

You can redeclare a JavaScript var variable anywhere in a program.

Example

var x = 2;     // Allowed var x = 3;     // Allowed x = 4;         // Allowed

You cannot reassign a variable declared with var or let to const within the same scope.

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 }

Changing the value of a const variable within the same scope is not permitted.

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 }

Declaring a variable with const in another scope or block is permitted.

 

Example

const x = 2;       // Allowed {   const x = 3;   // Allowed } {   const x = 4;   // Allowed }

Hoisting

Variables declared with the var keyword are hoisted to the top of their scope and can be initialized at any point within that scope.

The meaning is that you can utilize the variable before formally declaring it.

Example

This is acceptable.

carName = “Volvo”; var carName;

Const variables are hoisted to the top of their scope but remain uninitialized.

Attempting to access a const variable before its declaration will raise a ReferenceError.

Example

alert (carName); const carName = “Volvo”;