Object.freeze() vs Object.seal()

Written byPhuoc Nguyen

#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.

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.

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? Not just about this specific post, but about any topic in front-end development that you'd like to learn more about? If so, feel free to send me a message on Twitter or send me an email. You can find them at the bottom of this page.

I have a long list of upcoming posts, but your questions or ideas for the next one will be my top priority. Let's learn together! Sharing knowledge is the best way to grow 🥷.

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.