Let’s Make ‘const’ an Actual Const: Safeguarding Object Immutability in JavaScript and TypeScript

Introduction:

The ‘const’ keyword in JavaScript is commonly associated with creating immutable variables, preventing the reassignment of values. However, when it comes to non-primitive types like objects, the immutability provided by ‘const’ can be deceiving. This article explores the nuances of ‘const’ in the context of objects, and how developers can ensure true immutability.

Understanding the Challenge:

Consider the following scenario

const myVar = 5;
myVar = 6; // Results in a TypeError - Good!

const myObj = { name: 'India' };
myObj.name = 'Bharat'; // No TypeError - What happened?

In the case of the primitive type ‘myVar’, JavaScript rightly prevents reassignment. However, with the non-primitive ‘myObj’, the assignment to the property ‘name’ is allowed. Why does this happen, and how can we address it?

Ways to Achieve True Immutability:

In plain JavaScript, you can utilize **Object.freeze** to make an object immutable:

const myObj = { name: 'India' };
Object.freeze(myObj)
myObj.name = 'Bharat'  // Doesn't have any impact my object remains the same

TypeScript provides a more elegant solution using the ‘as const’ assertion. This not only makes the object readonly but also enhances type safety:

const myObj = { name: 'India' } as const;
myObj.name = 'Bharat'; // TypeScript compilation error - True immutability!

The ‘as const’ assertion tells TypeScript that the properties of the object should be treated as constants, preventing any modifications.

Benefits of ‘as const’:

• Type Narrowing:

Using ‘as const’ in TypeScript provides type narrowing. The type of the object becomes more precise, reflecting the actual key-value pairs:

// Without as const
const myObj = {name:'India'} 
type MyObjType = typeof myObj
/* MyObjType = {name: string} */

 // With as const
 const myObj = {name:'India'} as const 
 type MyObjType = typeof myObj
 type XYZ = { readonly name: 'India' };

• Ensured Readonly Properties:

The ‘as const’ assertion ensures that all properties of the object are readonly, guaranteeing their immutability:

const myObj = { name: 'India', population: 1_300_000_000 } as const;
 myObj.population = 1_400_000_000; // TypeScript compilation error - Readonly!

• Enhanced Type Safety:

The TypeScript compiler becomes more assertive, catching potential bugs related to object modifications during development.

Attaching the Play-gound Link

Conclusion:

Understanding the subtleties of ‘const’ in JavaScript, especially with non-primitive types, is crucial for maintaining true immutability. While ‘Object.freeze’ provides a solution in plain JavaScript, TypeScript’s ‘as const’ brings a more robust and type-safe approach to ensuring object immutability, with the added benefits of precise type narrowing and enhanced developer confidence.