Difference Between Const and Readonly in TypeScript

The const and readonly both are used to create the variables and properties that can not be re-assigned once they get initialized by some value. But they are different from each other. Let us discuss the differences between them.

Const

The const keyword is used to declare the constant variables that can not be re-assigned with a value later. It is mainly applied to the variable declaration.

Syntax:

const variableName: variableType = value;

Features:

• The const keyword will not allow to re-assign the value to a variable.
• A constant variable must be initialized at the time of the declaration.
• The variables defined using the const keyword have the block scope.
• The arrays defined using the const keyword can also not be re-assigned with a new array. While the array values can be updated using the index.

Example: The below code example implements the const keyword to declare a variable in TypeScript.

Javascript

const cmpny_name: string = "GeeksforGeeks";
const employees: number = 300;
const arr: (string | number)[] =
    [1, 2, "four", "four"];
console.log
    ("Before modifying array elements: ", arr);
arr[2] = "three";
console.log
    ("After modifying array elements: ", arr);
console.log
    (`Company Name: ${cmpny_name}, Workforce: ${employees}+`);
cmpny_name = "New Company";
employees = 200;
console.log
    (`Company Name: ${cmpny_name}, Workforce: ${employees}+`);

Output:

Before modifying array elements:  [1, 2, "four", "four"]
After modifying array elements:  [1, 2, "three", "four"]
Company Name: GeeksforGeeks, Workforce: 300+
Cannot assign to 'cmpny_name' because it is a constant.
Cannot assign to 'employees' because it is a constant.

Readonly

The readonly keyword is used to define properties whose values can not be changed once they are initialized with a value. The readonly is mostly used with the properties of objects, classes and interfaces.

Syntax:

class className {
    public readonly propertyName = value;
}

Features:

• A property defined using readonly must be assigned at the time of declaration or using the constructor function of the class (if it’s a class property).
• The value of readonly property can not be re-assigned with a new value.
• The readonly can be used to create a entire object or specific properties as readonly.

Example: The below code example illustrates the practical implementation of readonly to define properties.

Javascript

// Implementation with classes
class cmpny {
    public readonly name: string =
        "GeeksforGeeks";
    public readonly desc: string =
        "A Computer Science Portal.";
}
const myCmpny = new cmpny();
console.log
    (`Company: ${myCmpny.name},
    Description: ${myCmpny.desc}`);
myCmpny.name = "New Company";
myCmpny.desc = "New Description";
console.log
    (`Company: ${myCmpny.name},
    Description: ${myCmpny.desc}`);


// Implementation with interface and object
interface readonlyInterface {
    readonly crktr_name: string,
    readonly runs: number
}
const obj: readonlyInterface = {
    crktr_name: "Virat Kohli",
    runs: 26000
}
console.log
    (`Cricketer Name: ${obj.crktr_name},
     Runs: ${obj.runs}`);
obj.crktr_name = "Sachin Tendulkar";
obj.runs = 30000;
console.log
    (`Cricketer Name: ${obj.crktr_name},
    Runs: ${obj.runs}`);

Output:

Company: GeeksforGeeks, Description: A Computer Science Portal.
Cannot assign to 'name' because it is a read-only property.
Cannot assign to 'desc' because it is a read-only property.
Cricketer Name: Virat Kohli, Runs: 26000
Cannot assign to 'crktr_name' because it is a read-only property.
Cannot assign to 'runs' because it is a read-only property.

Differences between const and readonly in TypeScript

const	readonly
It is used to declare constants whose values can not be changed throughout the code.	It is used to create immutable class or object properties that can not be re-assigned.
These constants must be initialized with a value at the time of declaration.	These properties can be assigned with a value either at the time of declaration or inside the class constructor.
The variables defined using const has the block scope.	The readonly properties has the scope within the containing class or the object.
It allows to change the particular value inside the array, but not the value contained by the reference of the array.	It creates the entire array and the particular elements as readonly based on your requirement.
It can directly be used to create a constant object with mutable properties.	It is used to create immutable properties of an object with the help of the interfaces.