Difference between const and readonly in typescript/angular

In this post, you will learn a step-by-step tutorial on the difference between the const and readonly keywords in TypeScript and Angular.

You can also check out Typescript final keyword

#Difference between const and readonly variables in TypeScript

const is applied to variables only.

Let’s start by declaring a constant-content variable.

const content;

The TypeScript compiler throws a Cannot assign to ‘content’ because it is a constant error. This indicates that constants must be initialized during declaration, as seen below.

const content = "text string";

Attempting to assign a new value to a constant results in an error:

// error
content = "new text";

The compiler throws an error Cannot assign to ‘content’ because it is a constant. Once const variables are declared and initialized, their values cannot be modified.

that means, Once const variables are declared and initialized, values are not modified.

readonly applies to properties of a class.

Let’s declare a readonly property in a class:

class user {
    public readonly property;
}

Here, the property is declared but not initialized, and no error is thrown. This is a valid case for readonly properties.

Readonly properties can be declared and assigned with a value like constants.

class user {
    public readonly property=11;
}

Now, let’s create an object of this class and attempt to change the value of the property.

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

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

#Difference between const and readonly arrays in Angular

This section covers a comparison of const arrays and readonly arrays in TypeScript.

Let’s declare and initialize const arrays.

const constArray = [5, 1, 4];

While const variables cannot be reassigned, const arrays can have their elements modified/reassigned 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, the original array cannot 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];

Now, let’s look at a readonly array example:

In the following class:

in the below class

• We declare the numbers property with a ReadonlyArray of number type and assign an array of values.
• In the method, we try 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
  }
}

The 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’?

This indicates that readonly arrays cannot be reassigned with push/pop/index methods.

However, we can reassign the array with a new array of data.

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

#Conclusion

In summary, const and readonly are used to enforce immutability in different ways:

• const can be applied to variables only, while readonly is applied to properties.
• A const value is initialized during declaration only, while readonly can be declared without assigned values.
• A const value cannot be reassigned, while readonly can be reassigned. Since Angular uses the TypeScript language, these rules apply to Angular framework components as well.