JavaScript Tutorial ✦

Deep freeze and shallow freeze are related to objects in JavaScript. By using shallow freeze, you can freeze an object.

Example:

let obj = {
  name: "John",
  address: {
    Street: "221B Baker Street",
    City: "London"
  }
};

Here, by using Object.freeze(obj), it will freeze editing the object. But we can still edit nested key-value pairs.

For example:

• name is now frozen—we can't edit it using obj.name = "new name" ❌
• But we can still edit obj.address.City = "New York" ✅

This is still possible because we are editing a nested object directly—that’s called shallow freeze.

---

On the other hand, in deep freeze, we can’t edit both keys in the nested object also. If you are using deep freeze, here we are recursively freezing each nested object—no matter how deeply nested it is.

Deep Freeze Example:

function deepFreeze(obj) {
  Object.freeze(obj);

  for (let key in obj) {
    if (
      obj.hasOwnProperty(key) &&
      typeof obj[key] === "object" &&
      !Object.isFrozen(obj[key])
    ) {
      deepFreeze(obj[key]);
    }
  }

  return obj;
}

let obj = {
  name: "John",
  address: {
    Street: "221B Baker Street",
    City: "London"
  }
};

deepFreeze(obj);

obj.name = "New Name";             // ❌ won't work
obj.address.City = "New York";     // ❌ won't work

console.log(obj);

const obj = { a: { b: 2 } };
Object.freeze(obj); // Shallow freeze
// Custom deep freeze:
function deepFreeze(obj) {
  Object.freeze(obj);
  for (const key in obj) {
    if (obj[key] !== null && typeof obj[key] === 'object') {
      deepFreeze(obj[key]);
    }
  }
  return obj;
}