{

Difference between const and readonly in typescript/angular


Difference between const and readonly in typescript/angular

In this post, You will learn step by step tutorial on the difference between const and readonly keywords in typescript and angular.

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 in 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 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-only **property.

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, array variable reassign 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 method, trying to modify 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 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 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 assign values.
  • const value can not be reassigned, readonly can be reassigned.

As angular uses the typescript language, the same rules are applicable in angular framework components.

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.