ES6 has brought several new features and methods into JavaScript since its release. These features have better improved our workflow and productivity as JavaScript developers. Amongst these new features are Object.freeze() method and const .

It is argued among a few developers especially newbies that these two feature works the same way, but NO it doesn’t. Object.freeze() and const work differently. Let me show you how!


const and Object.freeze() are totally different.

Mutable objects have properties that can be changed, immutable objects have no properties that can be changed after the object is created.


Examples:

Const

const user = 'Bolaji Ayodeji'

 user = 'Joe Nash'

This would throw an Uncaught TypeError because we are trying to reassign the variable user which was declared with the const keyword, THIS IS NOT VALID.

Originally, this would work with var or let but will not with const

The problem with const

When working with Objects, using const only prevents reassignment and not immutability (Ability to prevent changes to its properties)

Consider the code below. We have declared a variable using the const keyword and assigned an object named user to it.

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  email: 'hi@bolajiayodeji.com',
  net_worth: 2000
}
user.last_name = 'Samson';
// this would work, user is still mutable!
user.net_worth = 983265975975950;
// this would work too, user is still mutable and getting rich :)!
console.log(user);  // user is mutated

Although we can’t reassign to this variable called object, we can still mutate the object itself.

const user = {
  user_name: 'bolajiayodeji'
}
// won't work

We definitely would want to have Objects with properties that cannot be modified or deleted, const cannot do this and this is where Object.freeze() saves the day :).

Behold Object.freeze()

To disable any changes to the object we need Object.freeze().

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  email: 'hi@bolajiayodeji.com',
  net_worth: 2000
}
Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.net_worth = 983265975975950;
// this won't work too, user is still immutable and still broke :(!
console.log(user);  // user is immutated

Objects with nested properties are not actually frozen

Well, Object.freeze() is a bit shallow, you will need to recursively apply it on nested objects to protect them.

const user = {
  first_name: 'bolaji',
  last_name: 'ayodeji',
  contact: {
    email: 'hi@bolajiayodeji.com',
    telephone: 08109445504,
  }
}


Object.freeze(user);
user.last_name = 'Samson';
// this won't work, user is still immutable!
user.contact.telephone = 07054394926;
// this will work because the nested object is not frozen
console.log(user);

So Object.freeze() doesn’t fully freeze an object when it has properties which are nested.


To completely freeze objects and its nested properties, you can write your own library or use already created libraries like Deepfreeze or immutable-js

Conclusion

const and Object.freeze() are not the same, const prevents reassignment and Object.freeze() prevents immutability


Bonus Tip

Want to learn modern JavaScript? I’ve got great news for you :)

JavaScript Teacher has written a book JavaScript Grammar. Market value $34.99 but yours is FREE!

This book covers all you need to learn Modern JavaScript and get hired!

Get your copy here: Dark ModeLight Mode

Also, please support JavaScript Teacher on Patreon to enable him to distribute more materials like this for FREE

Thanks for reading!