javascript objects are pushed into array as reference

Question

EDIT: I forgot to add, this is for the NODE JS Server side, some answers has the Jquery cloning (does jquery cloning works on the server side, I tried it is throwing error as ReferenceError: jQuery is not defined ). So, I request every one, please add solution which can work on the Node JS

First check these program and their output:

var a  = {};
a.name = "Jessie";
a.age = 22;

var tarray = [];
tarray.push(a);

console.dir('------------------before-------------------------------------');
console.dir(tarray);

a.name = "Monica";
a.age = 18;

console.dir('------------------After-------------------------------------');
console.dir(tarray);

Output:

'------------------before-------------------------------------'
[ { name: 'Jessie', age: 22 } ]
'------------------After-------------------------------------'
[ { name: 'Monica', age: 18 } ]

Same program in a different way,

var a  = [{"name" : "Jessie", "Age" : 22}];

var tarray = [];
tarray.push(a[0]);

console.dir('------------------before-------------------------------------');
console.dir(a);
console.dir(tarray);

a[0].name = "Monica";
a[0].Age = 18;

console.dir('------------------After-------------------------------------');
console.dir(a);
console.dir(tarray);

Output

'------------------before-------------------------------------'
[ { name: 'Jessie', Age: 22 } ]
[ { name: 'Jessie', Age: 22 } ]
'------------------After-------------------------------------'
[ { name: 'Monica', Age: 18 } ]
[ { name: 'Monica', Age: 18 } ]

From these programs i can figure it out that, JS objects are pushed into array as reference. So that, if the object changes, the value in the object which is pushed into the array also changes.

How to change this behavior in the javascript. I mean, if the object value changes then, the object pushed into the array should not have to change.

Yes, thanks to all, cloning using the Object.assign and JSON.parse can solve the problem:

var a  = {};
a.name = "Jessie";
a.age = 22;

var clone = Object.assign({}, a);
var tarray = [];
tarray.push(clone);

console.dir('------------------before-------------------------------------');
console.dir(tarray);


a.name = "Monica";
a.age = 18;

var clone = Object.assign({}, a);
tarray.push(clone);

console.dir('------------------After-------------------------------------');
console.dir(tarray);

a.name = "Rose";
a.age = 16;

var j = (JSON.parse(JSON.stringify(a)));


tarray.push(j);
console.dir('------------------After JSON Parse Cloning-------------------------------------');
console.dir(tarray);

Output:

'------------------before-------------------------------------'
[ { name: 'Jessie', age: 22 } ]
'------------------After-------------------------------------'
[ { name: 'Jessie', age: 22 }, { name: 'Monica', age: 18 } ]
'------------------After JSON Parse Cloning-------------------------------------'
[ { name: 'Jessie', age: 22 },
  { name: 'Monica', age: 18 },
  { name: 'Rose', age: 16 } ]

But what is the deep / shallow copying in the JavaScript? Is their any concept like that in JS?

Answer 1

try to do

tarray.push(jQuery.extend({}, a));

instead of

tarray.push(a);

It will put the copy of object to array, not a reference

Or you can use tarray.push(Object.assign({}, a)); from ES6

Answer 2

You have to clone the object.

Here are 5 ways to do that:

You can do this many ways. Browsers are starting to support Object.assign . You can use a babel polyfill if you're worried about browser support:

var clonedObject = Object.assign({}, a);

Then do what you will.

If you're into utility libraries, you can also use _.assign from lodash .

You could also use the ES7 object spread operator:

var clonedObject = { ...a };

If you wanna go all native and old-school, you can use Array.prototype.reduce :

var clonedObject = Object.keys(a).reduce(function(result, prop) {
  result[prop] = a[prop];
  return result;
}, {});

Or you could do what this answer says :

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);