JS Const
The const keyword was introduced in ES6 (2015)
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope
Cannot be Reassigned
A variable defined using the const keyword can’t be reassigned.
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
When JavaScript const variables are declared, a value must be assigned to them.
Correct
const PI = 3.14159265359;
Incorrect
const PI;
PI = 3.14159265359;
When to use JavaScript const?
Always declare a variable with const when you know that the value should not be changed.
Use const when declaring:
- A new Array
- A new Object
- A new Function
- A new RegExp
Constant Objects and Arrays
The keyword const is slightly confusing.
It doesn’t specify a constant value. It establishes a constant reference to a value.
Therefore, you cannot:
- Reassign a constant value
- Reassign a constant array
- Reassign a constant object
But you CAN:
- Change the elements of constant array
- Change the properties of constant object
Constant Arrays
You can modify the elements of a constant array:
Example
// 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");
But you can NOT reassign the array:
Example
const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"]; // ERROR
Constant Objects
You can modify the characteristics 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";
But you can NOT reassign the object:
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 have block scope.
let and const can not be redeclared.
let and const must be declared before use.
let and const does not bind to this.
let and const are not hoisted.
What is Not Good?
var does not have to be declared.
var is hoisted.
var binds to this.
Browser Support
The let and const keywords are not supported by Internet Explorer 11 and earlier.
The table below defines the initial browser versions with complete support:
Block Scope
When it comes to Block Scope, declaring a variable with const is comparable to using let.
In this example, the x declared inside the block differs 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
Redeclaring a JavaScript var variable is permitted anywhere within 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 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
}
Reassigning an existing const variable within the same scope is not permitted:
Example
const x = 2; // Allowed
{
const x = 3; // Allowed
}
{
const x = 4; // Allowed
}
Hoisting
Variables defined with var are hoisted to the top and can be initialized at any time.
Meaning: The variable can be used before it is declared.
Example
This is OK:
carName = "Volvo";
var carName;
To learn more about hoisting, read the chapter JavaScript Hoisting.
Variables declared with const are also elevated to the top but not initialized.
Meaning: Using a const variable before it is declared will cause a ReferenceError.
Example
alert (carName);
const carName = "Volvo";
