Cloning a json object and changing values mutates the original object as well

Question

I was wondering why does this happen?

I have an json object stored in var myObj:

var myObj = JSON.parse(fs.readFileSync(\'json/data.json\', \'utf8\')         


        

Answer 1

You are not cloning ! :/

Replace this:

var modObj = myObj;

By this:

var modObj = JSON.parse(JSON.stringify(myObj));

If myObj is an array do this:

var modObj = myObj.slice();

Answer 2

You are not cloning you are just refering the same with new variable name.

Create a new object out of existing and use it

var modObj  = JSON.parse(JSON.stringify(myObj));

Answer 3

If you use jQuery, then you can do this

var mobObj = jQuery.extend(true, {}, myObj);

else try this

var mobObj = Object.assign({}, myObj);

Answer 4

although JSON.parse(JSON.stringify(myObj)) may seem simple and tempting, especially for bigger data structures it is not, because it has to serialize the objects and then parse this string again. I'd reccomend something like this:

function clone(deep, obj=undefined){
    var fn = clone[deep? "deep": "shallow"] || function(obj){
        return (!obj || typeof obj !== "object")? obj:  //primitives
            Array.isArray(obj)? obj.map(fn):            //real arrays
            deep? 
                //make a deep copy of each value, and assign it to a new object;
                Object.keys(obj).reduce((acc, key) => (acc[key] = fn(obj[key]), acc), {}):
                //shallow copy of the object
                Object.assign({}, obj);
    };
    return obj === undefined? fn: fn(obj);
}
clone.deep = clone(true);
clone.shallow = clone(false);

and then

//make a deep copy
var modObj = clone.deep(myObj);
//or 
var modObj = clone(true, myObj);

//or a shallow one
var modObj = clone.shallow(myObj);
//or
var modObj = clone(false, myObj);

I prefer this style clone.deep(whatever) because the code is self explaining and easy to scan over.

Answer 5

You are not cloning, you are just passing the reference to myObj to modObj.

You can use Object.assign()

var modObj = Object.assign({},myObj);

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.