Restrict Object Mutation In JavaScript

Flexibility Of JavaScript Objects

As a web developer, I've always been fascinated by the flexibility of JavaScript objects. Objects in JavaScript are like containers that can hold any type of data, including strings, numbers, and even other objects. This makes them incredibly versatile and easy to work with.

One of the most powerful features of JavaScript objects is their ability to be dynamically modified. Unlike many other programming languages, you can add or remove properties from an object at any time. This means you can build complex data structures on the fly, without having to declare everything upfront.

Another benefit of JavaScript objects is their ability to be passed around as arguments to functions. This allows you to create reusable code that can work with different sets of data. For example, you could create a function that takes in an object representing a user and returns their full name, email address, and phone number.

Of course, with great power comes great responsibility. It's important to be careful when modifying objects, as it can lead to unexpected behavior in your code. To avoid this, it's a good idea to use tools like TypeScript or a linter to catch any potential issues before they become problems.

Overall, the flexibility of JavaScript objects is one of the language's greatest strengths. Whether you're building a simple website or a complex web application, understanding how to work with objects effectively is essential for success.

How To Restrict JavaScript Objects Mutation

1. Object.seal() :- Object.seal() in JavaScript is a method that prevents new properties from being added to an object and makes all existing properties non-configurable. This means that the values of existing properties can still be changed, but their characteristics cannot.

   In JavaScript, the characteristics of a property in an object refer to its configurability, writability, and enumerability. When you use the Object.seal() method, all existing properties become non-configurable, which means that their characteristics cannot be altered. This ensures that the object's properties remain consistent and secure. However, you can still change the values of the existing properties. Read More About Property Descriptor

    const person = {
        name: "Akash Deep Chitransh",
        role: "Front-End Developer"
    }
   
    Object.seal(person);
   
    //Existing Properties Can Be Changed
    person.name = "CodeChitra";
    //New Properties Can Not Be Added
    person.age = 20;
   
    console.log(person) // {name: "CodeChitra", role: "Front-End Developer"}
   

2. Object.freeze() :- Object.freeze() is a method in JavaScript that prevents modification of an object's properties. Once an object is frozen, its properties cannot be added, deleted, or modified. This makes the object immutable, providing data integrity and preventing unexpected changes in the code.

   Like Object.seal() method, Object.freeze() method allows you to make object properties non-modifiable, which can be useful in certain situations.

    const person = {
        name: "Akash Deep Chitransh",
        role: "Front-End Developer"
    }
   
    Object.freeze(person);
   
    //Existing Properties Can Not Be Changed
    person.name = "CodeChitra";
    //New Properties Can Not Be Added
    person.age = 20;
   
    console.log(person) // {name: name: "Akash Deep Chitransh", role: "Front-End Developer"}
   

How To Freeze And Seal Deeply Nested Objects

Object.seal() and Object.freeze() methods are helpful, but unfortunately, they don't work with deeply nested objects.

To make them work with deeply nested objects we can implement our own functions, of course by taking the help of these two methods and recursion.

Let's Implement A Function For Each Of Them

Deep Seal

function deepSeal(obj){

  for([_, value] of Object.entries(obj)){
    if(typeof value === 'object'){
      deepSeal(value);
    }
  }
  return Object.seal(obj);
}

const person = {
    name: "Akash Deep Chitransh",
    role: "Front-End Developer",
    add: {
        city: "Indore"
    }
}

deepSeal(person);

//Existing Properties Can Be Changed
person.add.city = "Kanpur";
//New Properties Can Not Be Added
person.add.pin = "238288";

console.log(person);
/*{
    name: "Akash Deep Chitransh",
    role: "Front-End Developer",
    add: {
        city: "Kanpur"
    }
}*/

Deep Freeze

function deepFreeze(obj){

  for([_, value] of Object.entries(obj)){
    if(typeof value === 'object'){
      deepFreeze(value);
    }
  }
  return Object.freeze(obj);
}

const person = {
    name: "Akash Deep Chitransh",
    role: "Front-End Developer",
    add: {
        city: "Indore"
    }
}

deepSeal(person);

//Existing Properties Can Not Be Changed
person.add.city = "Kanpur";
//New Properties Can Not Be Added
person.add.pin = "238288";

console.log(person);
/*{
    name: "Akash Deep Chitransh",
    role: "Front-End Developer",
    add: {
        city: "Indore"
    }
}*/

In the above implementations, we are recursively checking for an object property that has a value type of an object, and making them seal or freeze.

Thanks For Reading❤

I Hope You LIked It, If Yes Then Please Share It With Your Friends❤

Sharing Is Caring, You Know😉