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?

You must clone the object. There are multiple ways to do this. See [What is the most efficient way to clone an object?](http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-an-object) — Oriol, Feb 09 '16 at 01:41
Possible duplicate of [javascript pass object as reference](http://stackoverflow.com/questions/16880418/javascript-pass-object-as-reference) — Lucas Rodriguez, Feb 09 '16 at 01:42
@LucasRodriguez, the suggested duplicate does not tell the OP how to clone an object instead of referencing it. — tokamak, Feb 09 '16 at 01:47
Note that copying an object via *JSON.parse(JSON.stringify())* has some serious issues in general use. It's not meant for that. JSON is a way of transmitting data, not serialising objects. — RobG, Feb 09 '16 at 02:06

Denys Konoplin · Answer 1 · 2016-02-09T02:06:21.360

0

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

edited Feb 09 '16 at 02:06

answered Feb 09 '16 at 01:57

Denys Konoplin

362
1
9

I am sorry i didn't mentioned in question, But it is on the Node JS (server side), so is the jQuery works on the server side. – user3278897 Feb 09 '16 at 02:25
Then you should use the second variant for ES6 that I suggest tarray.push(Object.assign({}, a)); – Denys Konoplin Feb 09 '16 at 12:53

score 0 · Answer 2 · edited May 23 '17 at 12:30

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

javascript objects are pushed into array as reference

2 Answers2

Here are 5 ways to do that: