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. 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.