Freezing Object In Javascript

Object.freeze() is useful to prevent an object from changing, so no new properties can be added to it, no existing properties can be removed, the enumerability can not be changed, and existing values of properties can not be changed.

const address = {
    registered: false
};
Object.freeze(address);

address.registered = true;
console.log(address);
> { registered: false }

Notice that the boolean property of registered did not change because we froze the address object.

It is important to note that even if an object is frozen and not open to mutation it does not mean that it is constant since freeze is shallow meaning that deeper child objects can actually be mutated:

const address = {
    street: '123 Main street',
    inhabitants: [
    'John',
    'Molly'
    ]
};

Object.freeze(address);

address.inhabitants.push('Jamal');

console.log(address);
> {
    street: '123 Main street',
    inhabitants: [
        'John',
        'Molly',
        'Jamal'
    ]
}

If we wanted the entire object to be frozen we would have to do a deep freeze. We talked about deep and shallow operations in our javascript cloning post. Mozilla has a deepFreeze function example:

function deepFreeze(object) {

  // Retrieve the property names defined on object
  var propNames = Object.getOwnPropertyNames(object);

  // Freeze properties before freezing self
  for (let name of propNames) {
    let value = object[name];

    object[name] = value && typeof value === "object" ? 
      deepFreeze(value) : value;
  }

  return Object.freeze(object);
}

var obj2 = {
  internal: {
    a: null
  }
};

deepFreeze(obj2);

obj2.internal.a = 'anotherValue'; // fails silently in non-strict mode
obj2.internal.a; // null

Also note that Object.freeze does allow for reassignment if we don’t use a const for that method:

let pigs = {
  canFly : false
};

Object.freeze(pigs);
pigs = { canFly: true };

console.log(pigs);
> { canFly: true }