Typescript constants are variables, whose values cannot be modified. We declare them using the keyword const. They are block-scoped just like the let keyword. Their value cannot be changed neither they can be redeclared. Const keyword is part of the es2015 (es6) specification of the javascript.
Table of Contents
Declaring a const
We declare constants using the keyword const keyword
Example:
1 2 3 | const MaxAllowed=100 ; |
The initial value is a must
The initial value of the const must be specified along with the declaration.
1 2 3 4 5 6 | const maxValue=100; //Ok const maxValue1; //compile error 'const' declarations must be initialized.ts(1155) |
Const is block scoped
The const is similar to the let keyword. They are local to the code block in which we declare them.
1 2 3 4 5 6 7 8 9 10 | const Rate = 10; //global scope if (true) { const Rate = 8; //it is limited to this if block console.log(Rate); //Prints 8 } console.log(Rate); //Prints 10 |
The left-hand side of an assignment cannot be a constant
The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, it is just that the variable identifier cannot be reassigned.
So if you try to assign a new value to a constant it results in an error.
1 2 3 4 5 6 | const MaxTry=10 ; MaxTry=5; //Error Cannot assign to 'MaxTry' because it is a constant.ts(2588) |
Similarly, if the const is an object.
1 2 3 4 5 | const emp = { id:1, name:"Rahul"} emp = {id:2, name:"Sachin"} not allowed //error TS2588: Cannot assign to 'emp' because it is a constant. |
Const is a read-only reference to a value
The const creates a Readonly reference to a value. Readonly reference is the key here. We cannot change the reference. It is immutable. But we can change the value of the properties it holds.
This is evident when you create an object as constant. You cannot assign a new object.
1 2 3 4 5 | const emp = { id:1, name:"Rahul"} emp = {id:2, name:"Sachin"} not allowed //error TS2588: Cannot assign to 'emp' because it is a constant. |
However, you can change the properties of objects.
1 2 3 4 5 6 7 | emp.id=2; //allowed emp.name="Sachin" //allowed console.log(emp) // output: { id: 2, name: 'Sachin' } |
The following is an example using arrays.
1 2 3 4 5 6 7 8 9 10 11 12 | const cities =['Delhi','Mumbai','Chennai'] //not allowed. You cannot assign a new array cities= ['New york','London','Sydney'] //Error here //But you can change the items of the array. cities.splice(0,3); //allowed cities.push('New york','London','Sydney') //allowed console.log(cities); |
Cannot access before the declaration
Accessing the const before the initialization results in a ReferenceError. The variable in a “temporal dead zone” from the start of the block until the initialization.
1 2 3 4 5 6 7 8 9 | console.log(City); //Error here const City = "DELHI"; Will result in the error error TS2454: Variable 'City' is used before being assigned. block-scoped variable 'City' used before its declaration.ts(2448) |
Cannot Redeclare a const.
Trying to redeclare constant throws the following error. Uncaught SyntaxError: Identifier ‘MaxTry’ has already been declared”.
1 2 3 4 5 6 7 8 | const MaxTry=10; console.log(MaxTry); const MaxTry=100; //code will throw error here. console.log(MaxTry); |
Summary
We recommend using const to declare variables. Use let if you need to change the value of the variable. But always remember the fact that the properties of the const can be changed if it is an object.
Very good explanation.
I am an absolute beginner to TS but have some experience in several languages.
It was really easy to comprehend.
One thing I would like to see is having links to get help on keywords in articles like this.
e.g. I wanted to check what “splice” is but have to google again.
Anyway, thanks for your valuable contribution.