Object.freeze() vs Object.seal()
Written byPhuoc Nguyen
Created
28 Aug, 2023
Category
JavaScript
JavaScript has two methods that can help prevent the modification of objects:
`Object.freeze()` and `Object.seal()`. While their purpose is the same, they have some differences. Let's dive in and explore those differences!#Object.freeze()
The
`Object.freeze()` method is super useful when you want to make an object unchangeable. Once an object is frozen, its properties can't be modified or deleted, making it read-only. If you try to change an object that's been frozen, you'll get an error.js
const subscriber = {
fullName: 'John Smith',
emailAddress: 'john@smith.com',
};
Object.freeze(subscriber);
// Throws an error in strict mode
// Or it doesn't work at all
subscriber.fullName = 'Jonathan Smith';
subscriber.age = 42;In the above example, we have defined an object
`subscriber` with two properties - `fullName` and `emailAddress`. We then use the `Object.freeze()` method to freeze the object. When we try to modify the `fullName` property or add a new `age` property, an error is thrown.#Object.seal()
The
`Object.seal()` method is a way to lock down an object so that you can't add or delete properties from it. But you can still change the values of its existing properties. Once an object is sealed, you can't add or delete any properties without getting an error. So, it's a good way to make sure your object stays the way you want it to be.js
const subscriber = {
fullName: 'John Smith',
emailAddress: 'john@smith.com',
};
Object.seal(subscriber);
// Works fine
subscriber.fullName = 'Jonathan Smith';
// Throws an error in strict mode
// Or it doesn't work at all
subscriber.age = 42;
delete subscriber.emailAddress;We've created an object called
`subscriber` with two properties: `fullName` and `emailAddress`, just like in the previous example.But this time, we've used the
`Object.seal()` method to seal the object. When we try to add a new `age` property or delete the `emailAddress` property, an error is thrown because the object is sealed. However, we can still modify the value of the `fullName` property.#Conclusion
Simply put, in JavaScript, you can use
`Object.freeze()` and `Object.seal()` methods to stop objects from being modified. Both methods prevent changes to object properties, but `freeze()` makes an object entirely read-only, while `seal()` allows you to modify existing property values but not add or remove properties.
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn