๐Ÿฅถ Object seal and freeze in JavaScript: what they're for and when to use them

  


JavaScript is a dynamic language, in which objects can be freely modified after their creation. However, in some scenarios it may be useful or necessary to restrict changes to an object to protect data or maintain the integrity of a structure.

For this purpose, JavaScript provides two fundamental methods:

  • Object.seal()
  • Object.freeze()

In this article, we will see the difference between the two, how to use them correctly, and we will illustrate them with practical examples.

๐Ÿ”— Do you like Techelopment? Check out the site for all the details!

๐Ÿ” Object.seal(): lock the structure, but not the values

What is it?

Object.seal(obj) seals an object: prevents the addition or removal of properties, but allows modification of existing property values.

When to use it?

When you want to protect the object structure, ensuring that no one can add or remove fields, but still allow changes to the data interior.

Example:

const user = { 
  name: "Alice", 
  age: 30
};

Object.seal(user);

user.age = 31; // ✅ allowed
user.city = "London"; // ❌ won't be added
delete user.name; // ❌ won't be deleted

console.log(user);
// Output: { name: 'Alice', age: 31 }

As you can see:

  • The age property has been updated successfully.
  • Adding city is ignored.
  • Deleting name has no effect.

❄️ Object.freeze(): Freeze structure and values

What is it?

Object.freeze(obj) completely freezes an object: you can't add or remove properties, nor change their values.

When How to use it?

When you want to create an immutable object, for example, for configuration constants or data that must never change.

Example:

const config = {
  host: "localhost",
  port: 8080
};

Object.freeze(config);

config.port = 3000; // ❌ won't change
config.env = "production" // ❌ won't be added
delete config.host; // ❌ won't be deleted

console.log(config);
// Output: { host: 'localhost', port: 8080 }

๐Ÿงช How to check if an object is sealed or frozen?

JavaScript provides two methods to check the state of an object:


Object.isSealed(obj); // true if sealed
Object.isFrozen(obj); // true if frozen

Example:

const obj = {};
Object.seal(obj);

console.log(Object.isSsealed(obj)); // true
console.log(Object.isFrozen(obj)); // false

๐Ÿ” Warning: seal and freeze are shallow

Both techniques only act on the top level of the object. If an object has nested properties (objects within objects), these remain editable unless they are also sealed or frozen recursively.

Example:

const settings = {
  theme: {
    color: "blue"
  }
};

Object.freeze(settings);

settings.theme.color = "red"; // ✅ allowed (nested object not frozen)
console.log(settings.theme.color); // Output: "red"

How to freeze an object in depth?

You can use a recursive function:

function deepFreeze(obj) { 
  Object.getOwnPropertyNames(obj).forEach(prop => { 
    if (typeof obj[prop] === 'object' && obj[prop] !== null) { 
      deepFreeze(obj[prop]); 
    } 
  }); 
  return Object.freeze(obj);
}

const deepSettings = { 
  theme: { 
    color: "blue" 
  }
};

deepFreeze(deepSettings);
deepSettings.theme.color = "red"; // ❌ won't change

console.log(deepSettings.theme.color); // Output: "blue"

✅ Conclusion

The seal and freeze techniques are powerful tools for controlling and protecting the state of JavaScript objects. Use them to:

  • Prevent unintended changes
  • Make objects immutable (with freeze)
  • Secure APIs or configurations
  • Improve the security and stability of your code
Method Add properties Remove properties Modify values
Object.seal
Object.freeze

Remember: for complex or deep objects, consider using recursive functions like deepFreeze() for complete protection.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment