Creating new objects from frozen parent objects

Question

This example creates an object, freezes it, and then creates a new object from the frozen object. If the second object tries to change the test property, it can't. It remains frozen with the first object's value of 10.

//Create an object and freeze it

var first = {
    test: 10
};
Object.freeze(first);

//Create a second object from the first one and
//try and change the new test property (you can't)

var second = Object.create(first);
second.test = 20;
console.log(second.test); //10

Here are my questions:

Is second.test a new property on a new object, or is it just a reference to the property in the frozen first object?
Is it possible to use the frozen first.test as a default value, but let second.test overwrite it if it needs to?

My reason for asking is because I want to make an immutable a base object as a template with default values, and then use it to make new objects that I can customize. What's the best approach for this?

Thanks!

Answer 1

second is in fact a new object, with first being the prototype of second. The reason why

second.test = 20;

does not work is because upon assignment, it will look for the settings on the prototype (i.e. configurable, enumerable, writable, [[Extensible]]) and not assign to the instance if any of these are false¹. To assign directly to the instance, you'll have to use Object.defineProperty on second:

var first = {
    test: 10
};
Object.freeze(first);

var second = Object.create(first);
Object.defineProperty(second, 'test', { value: 20, enumerable: true, configurable: true, writable: true });
console.log(second.test); // 20

^1: [[Put]]: the ECMAScript Specification, §8.12.5

Answer 2

Use Object.assign

         var first = {
            test: 10
        };
        Object.freeze(first);

        //Create a second object from the first one and
        //try and change the new test property (you can't)

        var second = Object.assign({}, first, {
            test: 20
        });
        console.log(second.test); //20

Answer 3

In your case second is a reference to first (like you assumed). A solution would be to clone your object. There is no build in way to clone objects - you have to do it yourself, here is how (source):

function clone(obj){
   if(obj == null || typeof(obj) != 'object')
      return obj;

   var temp = obj.constructor();

   for(var key in obj)
       temp[key] = clone(obj[key]);
   return temp;
}

Then you use it this way:

var first = {
    test: 10
};
Object.freeze(first);

// clone it into a new one
var second = clone(first);
second.test = 20;
console.log(second.test); // 20 where the first is locked

Answer 4

In new versions of javascript you can use object destructuring to create a new object with the properties of the old one.

const first = {
    test: 10
};
Object.freeze(first);

//Clone the object
const second = {...first};
second.test = 20;
console.log(second.test); // 20 where the first is locked