Difference between const and readonly in typescript/angular


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

Difference between const and readonly variables in typescript

const can be 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 must be initialized 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

readonly applies to properties of an class

Declare an readonlyproperty in a class

class user {
    public readonly property;
}

Here in this property is declared not initialized,However error is not thrown and it is 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 an property

let myuser=new user();
myuser.property=12;

This will not works and compiler gives an error **Cannot assign to ‘property’ because it is a read-only **property.

Difference between const and readonly arrays in angular

This covers an 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, original array can not be reassigned

For example, array variable is reassigned with new array values which gives an error Cannot assign to ‘constArray’ because it is a constant.

 constArray = [19,6,9];

Let’s see an 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 an following error

Property ‘pop’ does not exist on type ‘readonly number[]’. Property ‘push’ does not exist on type ‘readonly number[]’. Cannot find 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 array with new array of data as seen below

 this.numbers=[1,2,3];

Conclusion

To sump, const and readonly can be 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 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.





Related posts

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.

Typescript Singleton pattern Implementation with example

Learn Typescript compiler option,tsconfig.json file

Difference between ngx-bootstrap and ng-bootstrap