DeepFreeze a nested Object/Array

To deeply freeze a nested object or array in JavaScript, you need to freeze not only the outer object but also any nested objects or arrays. You can achieve this by creating a recursive function that applies Object.freeze() to all levels of the object.

Here’s an example of how to implement deep freezing:

DeepFreeze Function

1234567891011121314151617

function deepFreeze(obj) {
  // Retrieve the property names defined on the object
  const propNames = Object.getOwnPropertyNames(obj);

  // Freeze properties before freezing the object itself
  for (let name of propNames) {
    let prop = obj[name];

    // If the property is an object, freeze it recursively
    if (typeof prop === 'object' && prop !== null) {
      deepFreeze(prop);
    }
  }

  // Finally, freeze the outer object (non-recursive objects will stop here)
  return Object.freeze(obj);
}

Usage Example

12345678910111213141516171819

const person = {
  name: 'John',
  address: {
    city: 'New York',
    zip: 10001,
  },
  hobbies: ['reading', 'gaming'],
};

// Deep freeze the person object
deepFreeze(person);

// Trying to modify properties
person.name = 'Jane'; // Won't work
person.address.city = 'Los Angeles'; // Won't work
person.hobbies.push('cycling'); // Won't work

console.log(person);
// Output: { name: 'John', address: { city: 'New York', zip: 10001 }, hobbies: [ 'reading', 'gaming' ] }

How It Works:

The deepFreeze() function freezes the object itself, and for each property that is an object (or array), it recursively freezes those as well.
The function ensures that all levels of the object/array hierarchy are made immutable, preventing any modifications.

This method ensures full immutability for complex objects with nested structures.