How to make a real copy of a JavaScript Array with Objects (without a reference)

It happens a lot that you want to copy a variable, with an Object or Array, to manipulate the data and use it afterward. But when we create an array of users and make a copy in a new variable, like this:

var originalObject = [
  {"first":"Gretchen","last":"Kuphal","email":"greenwolf54@gmail.com","address":"416 Lesch Road","created":"March 1, 2012","balance":"$9,782.26"},
{"first":"Morton","last":"Mayer","email":"salmonsquirrel25@gmail.com","address":"1602 Bernhard Parkway","created":"April 29, 2017","balance":"$6,596.11"},
{"first":"Catalina","last":"Daugherty","email":"Catalina.Daugherty@filomena.name","address":"11893 Kali Vista","created":"October 16, 2008","balance":"$6,372.86"},
{"first":"Orpha","last":"Heaney","email":"turquoisewolf22@gmail.com","address":"8090 Chris Stream","created":"November 21, 2015","balance":"$9,596.26"},
{"first":"Reva","last":"Mohr","email":"Reva.Mohr@oda.net","address":"0291 Kailyn Stravenue","created":"November 6, 2014","balance":"$4,768.37"},
{"first":"Loma","last":"Keeling","email":"turquoisegiraffe09@gmail.com","address":"84460 Samson Knoll","created":"June 13, 2017","balance":"$9,361.16"}
];

var duplicateObject = originalObject;

It will keep a reference from “ duplicateObject ” to “ originalObject ”. This is also called a shallow copy.

To show you that it will keep its reference, we gonna change the first name of the first user in the “ originalObject ”.

originalObject[0].first = "Ray";

Then log the “ originalObject ” and “ duplicateObject ” and the result will show you that both are changed! In a lot of cases, you don’t want this to happen!!

So how do we fix this?

We can do the trick with JSON.stringify and JSON.parse method.

var duplicateObject = JSON.parse(JSON.stringify( originalObject ));

And if we now change the first name of the first user in the originalObject, the duplicate will not change!

originalObject[0].first = "Ray";

Check it via the console to log the “ originalObject ” and “ duplicateObject ”;

Originally published at Raymon Schouwenaar.

Blog

How to make a real copy of a JavaScript Array with Objects (without a reference)

Raymon Schouwenaar

So how do we fix this?

Join Our Newsletter. No Spam, Only the good stuff.

Related