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? — Oriol
– Oriol, Commented Feb 9, 2016 at 1:41
@LucasRodriguez, the suggested duplicate does not tell the OP how to clone an object instead of referencing it. — tokamak
– tokamak, Commented Feb 9, 2016 at 1: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
– RobG, Commented Feb 9, 2016 at 2:06

Denys Konoplin · Accepted Answer · 2016-02-09 02:06:21Z

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 9, 2016 at 2:06

answered Feb 9, 2016 at 1:57

Denys Konoplin

3621 silver badge9 bronze badges

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

2 Comments

user3278897 Over a year ago

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.

Denys Konoplin Over a year ago

Then you should use the second variant for ES6 that I suggest tarray.push(Object.assign({}, a));

Community · Accepted Answer · 2017-05-23 12:30:40Z

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

Collectives™ on Stack Overflow

javascript objects are pushed into array as reference

2 Answers 2

2 Comments

Here are 5 ways to do that:

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Here are 5 ways to do that:

Comments

Linked

Related