Difference between Object.freeze(), Object.seal() and Object.preventExtensions()

The freeze(), seal(), and preventExtensions() methods of Object help us in securing any JavaScript object from being mutated.

The Object.freeze() method

This method completely freezes an object. It means that if an object is frozen, then we can’t add a new property to it, can’t update any existing property value, and we also can’t delete any existing properties.

const userData = {
  uid: "Am7w5e8sUpQx6kF5v",
  name: "peter parker",
  email: "peter.parker@marvel.com",
  address: "15th street, Queens, New York city",
};

Object.freeze(userData);
userData.age = 30;
userData.uid = "AM123";
delete userData.email;

console.log(userData);
/*
  {
    uid: 'Am7w5e8sUpQx6kF5v',
    name: 'peter parker',
    email: 'peter.parker@marvel.com',
    address: '15th street, Queens, New York city'
  }
*/

To check if an object is frozen, we can use the Object.isFrozen() method.

const obj = { x: 5 };
Object.freeze(obj);
console.log(Object.isFrozen(obj)); // true

The Object.seal() method

This method seals an object. It means that if an object is sealed, then we can only update the value of existing properties, but we can neither delete any property nor add a new property.

const userData = {
  uid: "Am7w5e8sUpQx6kF5v",
  name: "peter parker",
  email: "peter.parker@marvel.com",
  address: "15th street, Queens, New York city",
};

Object.seal(userData);
userData.age = 30;
userData.uid = "xxxxxx";
delete userData.email;

console.log(userData);
/*
  {
    address: "15th street, Queens, New York city",
    email: "peter.parker@marvel.com",
    name: "peter parker",
    uid: "xxxxxx"
  }
*/

To check if an object is sealed, we can use the Object.isSealed() method.

const obj = { x: 5 };
Object.seal(obj);
console.log(Object.isSealed(obj)); // true

The Object.preventExtensions() method

This method prevents new properties from being added to an object but lets the existing property be updated or deleted.

const userData = {
  uid: 'Am7w5e8sUpQx6kF5v',
  name: 'peter parker',
  email: 'peter.parker@marvel.com',
  address: '15th street, Queens, New York city'
}

Object.preventExtensions(userData);
userData.age = 30;
userData.uid = 'xxxxxx';
delete userData.email;

console.log(userData);
/*
  {
    address: "15th street, Queens, New York city",
    name: "peter parker",
    uid: "xxxxxx"
  }
*/

To check if an object is prevented from extensions, we can use the Object.isExtensible() method.

const obj = { x: 5 };
console.log(Object.isExtensible(obj)); // true
Object.preventExtensions(obj);
console.log(Object.isExtensible(obj)); // false

Using strict mode

When we use any three of the above methods on an object and later try to mutate it, it doesn’t work, but we also don’t get any console errors. When we use strict mode, it throws an error in such cases.

'use strict';
const obj = { x: 5 };
Object.freeze(obj);
obj.z = 10; // TypeError: Cannot add property z, object is not extensible

// same for Object.seal() and Object.preventExtensions()

Working with nested objects

The freeze(), seal(), and preventExtensions() methods apply only to the first level of properties. If any nested objects are present in an object, then modifying the nested objects works as before.

const user = {
  name: "Steve Roger",
  address: {
    city: "New York city",
    country: "USA",
  }
};

Object.freeze(user);
user.address.country = "Canada";
user.address.state = "Ontario";
delete user.address.city;

console.log(user.address);
/*
{
  country: "Canada",
  state: "Ontario"
}
*/

// same for Object.seal() and Object.preventExtensions()

So to apply these methods to all nested objects, we need to make recursive calls and apply these methods to each level of objects individually.

function freezeNestedObjects(obj) {
  Object.freeze(obj); // same thing for seal() and preventExtensions()
  Object.values(obj).forEach((ob) => {
    if (typeof ob === "object") freezeNestedObjects(ob);
  });
}

freezeNestedObjects(user);
user.address.country = "Canada";
user.address.state = "Ontario";
delete user.address.city;
console.log(user.address);
/*
{
    city: "New York city",
    country: "USA",
  }
*/

See Next

Amitav Mishra

2 thoughts on “Difference between Object.freeze(), Object.seal() and Object.preventExtensions()”

Antonio says:

May 4, 2022 at 3:17 pm

first of all, thank u for sharing all this knowledge :). and second, do u guyz make video tutorial as well?

1. Amitav Mishra says:
  
  May 5, 2022 at 7:24 am
  
  Thank you Antonio! we are not making video tutorial for now but that’s a great suggestion.

JS Curious