How to Preserve Immutability of Objects in JavaScript ?

Immutability is an issue when it comes to private or restricted objects. Sometimes we need to create new objects without making modifications or changes unintendedly to preserve the integrity of data. That’s why, we need to find a way to preserve the object states. In this article, we will understand the immutability of objects concept, along with understanding the different approaches to preserving the immutability of objects & correspondingly will know their basic implementation with the help of examples.

Immutability of Object

Immutability refers to ensuring the integrity of an object’s state. Immutable objects cannot be modified, add new, or delete existing properties. In this article, we will see how can we preserve the immutability of an object in JavaScript.

Different Techniques for preserving the immutability of objects

In JavaScript, we can preserve the immutability of objects using these methods:

• using JavaScript Object.freeze() method
• using JavaScript spread operator
• using JavaScript object.assign() method

Method 1: Using JavaScript Object.freeze() Method

JavaScript Object.freeze() method is used to freeze an object. Freezing an object does not allow new properties to be added to the object and prevents removing or altering the existing properties.

Syntax:

Object.freeze( obj );

Example: In this example, we will use Object.freeze() method to make the object immutable.

Javascript

// Creating an object constructor and assigning
// values to it
const obj = { name: 'JavaScript' };

// Creating immutable object using freeze method
Object.freeze(obj);

// Updating the properties of the frozen object
obj.name = 'HTML'

// Displaying the properties of the frozen object
console.log(obj.name);

Output

JavaScript

The output clearly shows when the object is passed in the object.freeze() method it becomes immutable and can’t be modified.

Method 2: Using JavaScript Spread Operator

The Spread operator allows an iterable to expand in places where 0+ arguments are expected. It is mostly used in the variable array where there is more than 1 value is expected.

Syntax:

let variablename1 = [ ...value ]; 

Example: In this example, we will create a new object using the spread operator preserving the state of the old object.

Javascript

// Creating an object
const oldObject = { name: 'John', age: 30 };

// Creating new object from old one
const newObject = { ...oldObject, age: 31 };

// Display properties of both objects
console.log(oldObject);
console.log(newObject);

Output

{ name: 'John', age: 30 }
{ name: 'John', age: 31 }

Method 3: Using JavaScript Object assign() Method

The Object.assign() method is used to copy the values and properties from one or more source objects to a target object.

Syntax:

Object.assign( target, ...sources );

Example: In this example, we will create a new object using object.assign() preserving the properties of existing objects.

Javascript

// Creating an object constructor and assigning
// values to it
const obj1 = { name: 'JavaScript' };

// Creating a second object using
// Object.assing() method
const obj2 = Object.assign({},obj1)

// Updating the properties of new object
obj2.name = 'HTML';

// Displaying the properties
console.log(obj1.name)
console.log(obj2.name);

Output

JavaScript
HTML

In Conclusion, the target is to preserve the immutability of objects which can be done either by freezing the object to make it immutable or by creating a new object with some modified properties. It can be achieved by using Inbuilt JavaScript methods like freeze(), Object.assign(), spread operator, etc.