How to create mutable AND immutable copy of object in JS

Question

Without using any additional libraries, how I can I create an immutable copy of an object and retain a mutable copy.

var mutableCopy = immutableData;

Object.freeze(immutableData);

mutableCopy.newProp = 'mutated!';

console.log(mutableCopy.hasOwnProperty('newProp')); // false

It seems that Object.freeze() also freezes objects by reference.

How can I create a mutable and immutable copy of an object?

Is this a deeply nested object, or is it only one level deep regarding the properties? — Montagist
– Montagist, Commented May 4, 2016 at 23:08
nested 2 levels deep, but I only want to mutate properties in the first level — Himmel
– Himmel, Commented May 4, 2016 at 23:11

Montagist · Accepted Answer · 2016-05-04 23:44:43Z

4

var objCopy = {};

for ( var propKey in objToClone )
    objCopy[ propKey ] = objToClone[ propKey ];

And object.freeze whichever you prefer. If you've a more complex/deeper object and need to mutate those deeper properties, I'd probably just use something hacky like

var objCopy = JSON.parse( JSON.stringify( objToClone ) );

edited May 4, 2016 at 23:44

answered May 4, 2016 at 23:14

Montagist

4012 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy Over a year ago

JSON.deserialize/serialize? Do you mean JSON.parse/stringify?

Sv443 Over a year ago

I tried var objCopy = Object.create(objToClone); which I found on another SO question which didn't work for copying the package.json file by reference, but the JSON stringify and then parse worked. Thanks!

Strikeskids · Accepted Answer · 2016-05-04 23:14:15Z

1

You are slightly right in this is a problem of pass-by-reference vs pass-by-value. In reality, the pass-by-reference occurs in the first line. Both mutableCopy and immutableData point to the same object on the JS heap.

What you should do is make a new object that is a duplicate of the old one. Then, freezing the new object will leave the old one as a mutable copy while preventing modifications.

var newObj = {}
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        newObj[key] = obj[key];
    }
}

Object.freeze(newObj);

You can, of course, make the new object the mutable copy and the old one the immutable one should you so choose.

answered May 4, 2016 at 23:14

Strikeskids

4,08215 silver badges27 bronze badges

3 Comments

Himmel Over a year ago

Even without the Object.freeze I could modify the properties of newObj here, and the properties of obj still wouldn't change, right?

Himmel Over a year ago

Looks like I wouldn't need to use Object.freeze

Strikeskids Over a year ago

You are correct. If you modify either obj or newObj after copying, the other will not change.

Collectives™ on Stack Overflow

How to create mutable AND immutable copy of object in JS

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related