The difference between readonly and const in Type Script

#webdev #javascript #programming #typescript

These two features are similar in that they are both non-assignable.

Can you explain exactly it?

In this article, I will share the differences between them.

const prevents reassignment to a variable.

In this case, hisName is a variable that cannot be reassigned.

const hisName = 'Michael Scofield'

hisName = 'Lincoln Burrows'
// → ❌ Cannot assign to 'hisName' because it is a constant.

However, you can reassign to property.

const hisFamily = {
  brother: 'Lincoln Burrows'
}

hisFamily.brother = ''
// → ⭕️

hisFamily = {
  mother: 'Christina Rose Scofield'
}
// → ❌ Cannot assign to 'hisFamily' because it is a constant.

readonly prevents reassignment to a property.

For example, if you try to assign a value to brother with readonly, a compilation error will occur.

let hisFamily: { readonly brother: string } = {
  brother: 'Lincoln Burrows'
}

hisFamily.brother = ''
// → ❌ Cannot assign to 'brother' because it is a read-only property.

On the other hand, assigning to the variable itself is allowed.

let hisFamily: { readonly brother: string } = {
  brother: 'Lincoln Burrows'
}

hisFamily = {
  brother: ''
}
// → ⭕️

Conclusion

const makes the variable itself non-assignable, while readonly makes the property non-assignable.

By combining const and readonly, you can create an object where both the variable itself and the object's properties are immutable.

const hisFamily: { readonly brother: string } = {
  brother: 'Lincoln Burrows'
}

hisFamily.brother = ''
// ❌ Cannot assign to 'brother' because it is a read-only property.

hisFamily = {
  brother: ''
}
// ❌ Cannot assign to 'hisFamily' because it is a constant.