DEV Community

Vivek Mittal
Vivek Mittal

Posted on

Understanding Object.seal(), Object.freeze(), and Object.preventExtensions() in JavaScript

Introduction

JavaScript is a versatile and powerful programming language, known for its ability to manipulate and manage objects. Three essential methods for controlling the mutability of objects in JavaScript are Object.seal(), Object.freeze(), and Object.preventExtensions(). These methods play a crucial role in ensuring the integrity and immutability of objects, providing developers with the tools they need to maintain data consistency and security. In this article, we'll explore each of these methods in detail and understand their use cases.

1. Object.seal()

The Object.seal() method is used to seal an object, which means that it prevents the addition or removal of properties from that object. It also makes all existing properties non-configurable, meaning they cannot be reconfigured or deleted. However, the values of the existing properties can still be modified.

const sealedObject = {
  name: 'John',
  age: 30
};

Object.seal(sealedObject);

// Adding a new property is not allowed
sealedObject.location = 'New York'; // Error

// Deleting properties is not allowed
delete sealedObject.age; // Error

// Modifying existing properties is allowed
sealedObject.name = 'Jane';
Enter fullscreen mode Exit fullscreen mode

Use cases for Object.seal():

  • When you want to prevent the addition or deletion of properties, but still allow property value changes.
  • Ensuring that certain properties remain consistent and unaltered throughout the object's lifetime.

2. Object.freeze()

The Object.freeze() method takes the concept of immutability a step further. When you freeze an object, it becomes completely immutable. This means that not only can you not add or delete properties, but you also cannot modify the values of existing properties.

const frozenObject = {
  name: 'Alice',
  age: 25
};

Object.freeze(frozenObject);

// Adding a new property is not allowed
frozenObject.location = 'Paris'; // Error

// Deleting properties is not allowed
delete frozenObject.age; // Error

// Modifying existing properties is not allowed
frozenObject.name = 'Bob'; // Error
Enter fullscreen mode Exit fullscreen mode

Use cases for Object.freeze():

  • When you need to create objects with constant, unchanging data.
  • Ensuring that data remains consistent and cannot be unintentionally modified.

3. Object.preventExtensions()

The Object.preventExtensions() method is used to prevent the addition of new properties to an object. While it doesn't affect the configurability or writability of existing properties like Object.seal(), it stops the object from being extended with new properties.

const extendedObject = {
  name: 'Eve',
  age: 28
};

Object.preventExtensions(extendedObject);

// Adding a new property is not allowed
extendedObject.location = 'Berlin'; // Error

// Deleting properties is allowed
delete extendedObject.age;

// Modifying existing properties is allowed
extendedObject.name = 'Charlie';
Enter fullscreen mode Exit fullscreen mode

Use cases for Object.preventExtensions():

  • When you want to prevent new properties from being accidentally added to an object while still allowing modification and deletion of existing properties.
  • Ensuring that an object has a fixed set of properties without any extensions.

Conclusion

In JavaScript, the Object.seal(), Object.freeze(), and Object.preventExtensions() methods provide developers with ways to control the mutability of objects, based on their specific requirements. By applying these methods appropriately, you can enhance the security and stability of your code, reduce the risk of unintentional data changes, and ensure that your objects behave as expected throughout their lifecycle. Understanding when and how to use these methods is essential for mastering JavaScript's object manipulation capabilities.

Top comments (3)

Collapse
 
adderek profile image
Maciej Wakuła

It is important to understand that const works in a way similar to seal - object itself is constant but it's properties can change.
Typescript can be used to enforce objects even more. And standard JavaScript could be annotated with JSDoc (though it doesn't support ex. interfaces).
Digging more can lead you to v8 and understanding what c++ code is used to implement that. And also what are the consequences of using v8, how it's prototyping worka and how complex is the memory management

Collapse
 
calinzbaenen profile image
Calin Baenen • Edited

It is important to understand that const works in a way similar to seal

Except that's not true.
Since the value being saved is a reference to an object, and not some magical 'concrete' value, the object can still have its properties modified orwith deleted, and new properties can also be added, as usual.
The only thing const does is make it so that the value doesn't change, meaning you won't have a reference to a different object (and thus a possibly different type).

You did mention TypeScript, so maybe you meant it in that context, but I felt like you meant it in terms ov JS, as that's what this post is about.

Collapse
 
adderek profile image
Maciej Wakuła • Edited

I meant that they are not same but share some similarities. V8 has rather complex logic based on the prototyping.

const c1={a:1};
const c2={b:2, __proto__:c1};
const F2=Object.freeze(c2);
delete c1.a;
console.log(F2.a); //undefined 
Enter fullscreen mode Exit fullscreen mode