Cloning an object and changing values mutates the original object as well

Question

I was wondering why does this happen?

I have an object stored in var myObj:

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

then I take a clone from the original object by:

var modObj = myObj;

After that I remove empty values from clone:

cleansedObj = removeEmpty(modObj);

Why does this also mutate the original myObj and remove empty values from that too?

here is the function:

function removeEmpty(obj) {
  Object.keys(obj).forEach(function(key) {
    if (obj[key] && typeof obj[key] === 'object') removeEmpty(obj[key])
    else if (obj[key] === "") delete obj[key]
  });
  return obj;
};

I found a workaround by doing this, but seems like uneccesary operation:

var cleansedObj = JSON.stringify(myObj);
cleansedObj = removeEmpty(JSON.parse(cleansedObj));

Thanks!

`var modObj = myObj;` is not cloning, you are just passing the reference to `myObj` to `modObj` — Satpal, Mar 01 '17 at 10:46
Probably related (`fs.readFileSync` feels like Node): [Cloning an Object in Node.js](http://stackoverflow.com/questions/5055746/cloning-an-object-in-node-js) — Álvaro González, Mar 01 '17 at 10:49
Possible duplicate of [How do I correctly clone a JavaScript object?](http://stackoverflow.com/questions/728360/how-do-i-correctly-clone-a-javascript-object) — Álvaro González, Mar 01 '17 at 11:44

score 8 · Accepted Answer · answered Mar 01 '17 at 10:48

8

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));

answered Mar 01 '17 at 10:48

Suresh Atta

120,458
37
198
307

score 4 · Answer 2 · answered Mar 01 '17 at 10:48

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.

score 3 · Answer 3 · answered Mar 01 '17 at 10:48

3

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();

answered Mar 01 '17 at 10:48

Alexandre Nicolas

1,851
17
19

score 1 · Answer 4 · answered Mar 01 '17 at 10:48

1

If you use jQuery, then you can do this

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

else try this

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

answered Mar 01 '17 at 10:48

Ararat Harutyunyan

916
1
8
19

I don't think he can use jQuery. He's apparently reading local files, what implies no browser. – Álvaro González Mar 01 '17 at 10:59
1

there is a jQuery npm package – Ararat Harutyunyan Mar 01 '17 at 11:01
I should have figured out... xD – Álvaro González Mar 01 '17 at 11:08

score 1 · Answer 5 · answered Mar 01 '17 at 12:02

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.

Cloning an object and changing values mutates the original object as well

5 Answers5

Linked

Related