Prologue

Few years back as a Java programmer, I used to admire the concept of making something Immutable. What was fascinating that, once marked immutable, changing it's property, extending it really not possible. Once I switched to JavaScript, I was in hunt for similar functionality. This blog is all about that hunting and learning from it.

Before we go further, Immutable means the characteristic of unchanging over time or unable to be changed. Mutable is just the opposite of that. I felt, it is important to explain these terms in plain English as I had my own struggle by thinking them as technical jargon.

Let's Freeze

We are aware that, there is a keyword called, const. Once a variable declared as const, we are not allowed to change the value of it. However this is tricky:

const someObj = {'name': 'Tapas'};

// This allowed as Objects are mutable
someObj.name = 'Sapat';

// However this is not allowed
someObj = {'name': 'Sapat'};

Hence the keyword const doesn't help in making an Object Immutable.

Hey, meet Object.freeze. As the name suggests, it freezes the Object. It means once frozen, it is not possible to:

extend or add a property to the object.
delete a property from the object.
modify the value of property of the object unless, the value is an unfrozen object.

Let us see these by example below:

How to Freeze an Object

This is the way to Freeze an Object and make it a solid immutable object.

const person = {
    name: 'Tapas Adhikary',
    age: 36,
    address: {
     city: 'Bangalore'
    }
};
// person and frozenPerson are the reference
// to the same object.
const frozenPerson = Object.freeze(person);

Add a property to a Frozen Object

Let us try adding a property called, salary to the person object.

person["salary"] = 68761182;
console.log('Person after adding property, Salary', person);
// or you can also do as,
frozenPerson["salary"] = 68761182;
console.log('frozenPerson after adding property, Salary', frozenPerson);

The try of adding a property is in vain. The output would be same as the original object.

Person after adding property, Salary 
{ 
    name: 'Tapas Adhikary', 
    age: 36, 
    address: 
        { 
            city: 'Bangalore' 
        } 
}
frozenPerson after adding property, Salary
{ 
    name: 'Tapas Adhikary', 
    age: 36, 
    address: 
        { 
            city: 'Bangalore' 
        } 
}

Delete a Property from the Frozen Object

Let us try to delete a property from the person object.

delete person.name;
console.log('Person after deleting property, name', person);

Output? Yeah expected. The object is unchanged.

Person after deleting property, name 
{ 
    name: 'Tapas Adhikary', 
    age: 36, 
    address: 
        { 
            city: 'Bangalore' 
        } 
}

Modify a property of a Frozen Object

Try to modify the name property of the person object. It will not be possible and the object will remain unchanged. However try to change the address property and see,

person.address.city = 'Kolkata';
console.log('frozenPerson after changing innerObject ', frozenPerson);

What do you think, the output would be? Unfortunately, it will change as again by rule, Objects are Mutable.

frozenPerson after changing innerObject  
{ 
    name: 'Tapas Adhikary', 
    age: 36, 
    address: { 
        city: 'Kolkata' 
    }
}

But don't worry. There is a way to make it Immutable. Try this,

// Now the Inner object is also frozen
Object.freeze(person.address)

You can test if the object is frozen

console.log('Is Person Frozen? ', Object.isFrozen(person));
console.log('Is frozenPerson Frozen? ', Object.isFrozen(frozenPerson));

Both will return true.

Ok so, How is it going to be useful?

It helps us to create an Immutable Object that can not be modified, extended. In Object Oriented world, it is a normal ask that, there could be APIs which should not be extended, modified outside of the current context. Remember the final keyword in Java? Also, this is a concept heavily used in Functional Programming.

By the way, this is not the only way you can Freeze an Object. There are couple of other ways you can do something mostly similar but not exactly similar. We will see those in upcoming post.

Hope you liked it, Stay Tuned!

Have you seen a Frozen Object?