Object.seal(), Object.freeze() and Object.preventExtensions() are popular methods in javascript to render an object immutable. But what are the differences between each of them and when should you prefer one over the other?
Let's try to understand the differences and use cases in detail.
Object.preventExtensions()
This method prevents an object from having new properties added to it, but otherwise leave the rest of the object properties alone.
You are allowed to:
- Modify existing values of an object.
- Delete existing properties of an object.
- Configure existing properties of an object.
You are not allowed to:
- Add new properties to an object.
let virus = {
name: 'SARS-CoV-2'
}
Object.preventExtensions(virus);
/* ❌ Not Allowed ❌ */
// You can't add new properties.
virus.year = 2020;
virus.year; // undefined. In strict mode, it throws a TypeError
/* ☑️ Allowed ☑️ */
// You can still modify existing values.
virus.name = 'Corona Virus'
// You can still configure existing properties.
Object.defineProperty( virus, 'name', {
writable: false,
enumerable: false,
configurable: false
});
// You can still deleting existing properties.
delete virus.name
// Use Object.isExtensible() to check if an object is extensible.
Object.isExtensible(virus) //false
Object.seal()
It creates a "sealed" object, which means apart from not being extended, you also can not reconfigure or delete any existing properties
You are allowed to:
- Modify existing values of an object.
You are not allowed to:
- Add new properties to an object.
- Delete existing properties of an object.
- Configure the existing properties of an object.
let virus = {
name: 'SARS-CoV-2'
}
Object.seal(virus);
/* ❌ Not Allowed ❌ */
// You can't add new properties.
virus.year = 2020;
virus.year; // undefined. In strict mode, it throws a TypeError
// You can't reconfigure existing properties.
Object.defineProperty( virus, 'name', {
writable: false,
configurable: false
}); // fails
// You can't deleting existing properties.
delete virus.name // fails
/* ☑️ Allowed ☑️ */
// You can still modify existing properties values.
virus.name = 'Corona Virus'
// Use Object.isSealed() to check if an object is sealed.
Object.isSealed(virus) // true
Object.freeze()
It creates a "frozen" object which is the highest level of immutability. A frozen object can no longer be changed. What it essentially means is you can not change the object in any way:
You are not allowed to:
- Add new properties to an object.
- Delete existing properties of an object.
- Configure the existing properties of an object.
- Modify the existing values of an object.
let virus = {
name: 'SARS-CoV-2'
}
Object.freeze(virus);
/* ❌ Not Allowed ❌ */
// You can't add new properties.
virus.year = 2020;
virus.year; // undefined. In strict mode, it throws a TypeError
// You can't configure existing properties.
Object.defineProperty( virus, 'name', {
writable: false,
enumerbale: false,
configurable: false
}); // fails
// You can't delete existing properties.
delete virus.name // fails
// You can't modify existing property values.
virus.name = 'Corona Virus' // fails
// Use Object.isFrozen() to check if an object is frozen.
Object.isFrozen(virus) // true
Summary
I have created this table which highlights the differences concisely.
Top comments (0)