Difference between const and readonly in typescript/angular
- Admin
- Sep 20, 2023
- Typescript
In this post, You will learn step by step tutorial on the difference between const
and readonly
keywords in typescript and angular.
You can also check Typescript final keyword
Difference between const and readonly variables in typescript
const applied to variables only.
let’s declare a constant-content variable
const content;
Typescript compiler gives Cannot assign to ‘content’ because it is a constant error That means constants initialize with value during declaration as seen below
const content = "text string";
Next, assign with new value to the constants.
// error
content = "new text";
Compiler throw with an error Cannot assign to ‘content’ because it is a constant.
that means, Once const variables are declared and initialized, values are not modified.
readonly
applies to properties of a class.
Declare a readonly property in a class
class user {
public readonly property;
}
Here this property is declared not initialized, However error is not thrown and it is a valid case only
readonly properties can be declared and assigned with a value like a constant.
class user {
public readonly property=11;
}
Let’s create an object of a class and change the value of a property.
let myuser = new user();
myuser.property = 12;
It will not works and the compiler gives an error Cannot assign to ‘property’ because it is a read-onlyproperty.
Difference between const and readonly arrays in angular?
It covers a comparison of const arrays and readonly arrays in typescript.
let’s declare and initialize const arrays
.
const constArray = [5, 1, 4];
const variables can not be reassigned, However, const arrays can be modified/reassigned array elements without any issues.
constArray[1] = 3; //works
constArray.push(11); // works
constArray.pop(); //works
constArray.push(14); // works
console.log(constArray); // [3, 1, 4, 14]
However, an original array can not be reassigned.
For example, an array variable reassigns with new array values that give an error Cannot assign to ‘constArray’ because it is a constant.
constArray = [19, 6, 9];
Let’s see a readonly array example.
in the below class
- declared numbers property with ReadonlyArray of number type and assigned an array of values
- in the method, trying to modify the readonly array using pop/push and index
class user {
numbers: ReadonlyArray<number> = [10, 11, 12];
public modifyArray(): void {
this.numbers.pop(); //compiler error
this.numbers.push(15); //compiler error
this.numbers[0] = 1; //compiler error
}
}
And compiler gives the following error.
Property ‘pop’ does not exist on type ‘readonly number[]‘. Property ‘push’ does not exist on type ‘readonly number[]‘. Cannot find the name ‘numbers’. Did you mean the instance member ‘this? numbers’?
that means the readonly array can not be reassigned with push/pop/index methods
However, we can reassign the array with a new array of data as seen below
this.numbers = [1, 2, 3];
Conclusion
To sum up, const, and readonly are modified in different ways.
- Const can be applied to variables only, readonly applied to properties
- const value initialized during declaration only, readonly can be declared without assigned values.
- const value can not be reassigned, readonly can be reassigned.
As angular uses the typescript language, the same rules are applicable to angular framework components.