The differences between Object.freeze() vs Const in JavaScript

Bolaji Ayodeji
May 13, 2019 · 4 min read
Image for post
Image for post

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 they don’t. Object.freeze() and const work differently. Let me show you how!

Overview

  • const behaves like let. The only difference is, it defines a variable that cannot be reassigned. Variables declared by const are block scoped and not function scoped like variables declared with var
  • Object.freeze() takes an object as an argument and returns the same object as an immutable object. This implies that no properties of the object can be added, removed, or changed.

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.

Image for post
Image for post

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

The problem with const

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
Image for post
Image for post

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
Image for post
Image for post

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()

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
Image for post
Image for post

Objects with nested properties are not actually frozen

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);
Image for post
Image for post

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

PS: This article was first published on my blog here

Thanks for reading, Cheers!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store