How to copy JavaScript object to new variable NOT by reference?

Question

I wrote a quick jsfiddle here, where I pass a small JSON object to a new variable and modify the data from the original variable (not the new variable), but the new variable's data gets updated as well. This must mean that the JSON object was passed by reference, right?

Here is my quick code:

var json_original = {one:'one', two:'two'}

var json_new = json_original;

console.log(json_original); //one, two
console.log(json_new); //one, two

json_original.one = 'two';
json_original.two = 'one';

console.log(json_original); //two, one
console.log(json_new); //two, one

Is there a way to make a deep copy of a JSON object so that modifying the original variable won't modify the new variable?

There is no JSON there. Please don't confuse JavaScript objects with JSON. — Quentin, Aug 21 '13 at 13:43
@Quentin, thanks I'll read up on the difference between javacript objects and json (ref: http://stackoverflow.com/questions/6489783/whats-the-difference-between-javascript-object-and-json-object) — Prusprus, Aug 21 '13 at 13:49
Don't think it's a duplicate, the answer was not found on the other thread. — Prusprus, Aug 21 '13 at 13:50
@Quentin, so it seems that if we were to talk purely within the scope of javascript, JSON and a Javascript Object are equivalent? JSON is different in that it's adaptable to the language used to interpret it? — Prusprus, Aug 21 '13 at 13:59
In the scope of JavaScript, JSON is either "A data format" or "An object containing methods to convert JavaScript objects to and from string representations of that data format" — Quentin, Aug 21 '13 at 14:02
This is not a duplicate, Prusprus asked for an answer with javascript not js jquery library... is there no simple way with ES6-ES7 to completely clone js object in a new space in memory? — DrSocket, Apr 02 '18 at 04:19
I also find lodash's _.clone and _.deepClone simple enough to use. — Aditya Prasoon, Jun 01 '20 at 18:46
@Bizarre couldnt post new answer, but given `var first = {key: "value"}`, then to clone it in ES6: `var myObj = {...first}`, and in ES5: `var myES5Obj = eval(first.toSource())` — B''H Bi'ezras -- Boruch Hashem, Jun 03 '20 at 01:17
@AdityaPrasoon is that different than `var nnewObj = {...old}`? — B''H Bi'ezras -- Boruch Hashem, Jun 03 '20 at 01:18
@bluejayke Almost same, but not really. Check this - https://2ality.com/2016/10/rest-spread-properties.html#spreading-objects-versus-object.assign() — Aditya Prasoon, Jun 03 '20 at 08:50
Does anyone know why this is a pain, it seems to me that being able to make a copy of something is super useful, why isn't it as simple as '=/=' or something? — Colin Smith, Jul 29 '20 at 13:50

Andy · Accepted Answer · 2023-05-31T10:22:41.457

267

Edit: this answer was made in 2014 and there are now better ways of deep-cloning an object.

I've found that the following works if you're not using jQuery and only interested in cloning simple objects (see comments).

JSON.parse(JSON.stringify(json_original));

Documentation

edited May 31 '23 at 10:22

answered Aug 21 '13 at 13:47

Andy

61,948
13
68
95

19

Does not work for functions, only properties (variables) within an object. – Harold Apr 27 '14 at 15:04
9

`JSON.stringify({key: undefined}) //=> "{}"` – Web_Designer Apr 30 '14 at 07:01
This worked wonders for me after having issues using `jQuery.extend` great technique. – Kiee Jul 18 '14 at 11:29
5

With this, dates will be stringified and will remain strings even after parsed. – Onur Yıldırım Dec 08 '14 at 02:55
6

Note that this will not work for objects with circular references. – DarkChipolata Jan 30 '15 at 10:39
This is exactly what I was looking for rather than Object.create. A bit expensive way by serializing and deserializing, but works for simple objects with properties. – animageofmine Dec 22 '15 at 23:43
As a vanilla solution it still seems so 'hacky', would be nice if there was a more 'correct' way of achieving this – jarodsmk Mar 10 '17 at 11:45
Will **NOT** work if your object contains functions, use `let _newObject = Object.assing({}, _oldObject);` to get a relatively good cloning strategy. Though I would suggest underscore or lodash or some other deep-cloning library. – Agnibha Apr 19 '17 at 06:43
1

This is why my answer says *simple* objects, but I guess that could have been clearer. – Andy May 19 '17 at 10:38
1

JSON.parse(JSON.stringify(object)) will cause all the dates changed to strings. – Wilson Aug 04 '17 at 06:23
1

This worked perfectly, in my case cloning a Vue Vuex state, which needed a little modification to remove sensitive data persisting in local storage. – Leo Feb 01 '18 at 15:28
can you please explain what it does? or make a link to JSON.parse and stringify? – Scriptkiddy1337 Jun 07 '19 at 07:24
@animageofmine why not `var newObj = eval(oldObj.toSource())` for es5 and `var newObj = {...oldObj}` for es6? – B''H Bi'ezras -- Boruch Hashem Jun 03 '20 at 01:20
Holy buckets, this just saved my sanity! – paulmiller3000 Dec 19 '20 at 19:29

score 123 · Answer 2 · edited May 05 '18 at 10:58

Your only option is to somehow clone the object.

See this stackoverflow question on how you can achieve this.

For simple JSON objects, the simplest way would be:

var newObject = JSON.parse(JSON.stringify(oldObject));

if you use jQuery, you can use:

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

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

UPDATE 2017: I should mention, since this is a popular answer, that there are now better ways to achieve this using newer versions of javascript:

In ES6 or TypeScript (2.1+):

var shallowCopy = { ...oldObject };

var shallowCopyWithExtraProp = { ...oldObject, extraProp: "abc" };

Note that if extraProp is also a property on oldObject, its value will not be used because the extraProp : "abc" is specified later in the expression, which essentially overrides it. Of course, oldObject will not be modified.

I prefer this answer due to the "In ES6 or TypeScript (2.1+):" section. The example of JQuery deep/shallow copy is nice as well. — Jacob Barnes, Mar 03 '20 at 18:28

How to copy JavaScript object to new variable NOT by reference?

2 Answers2

Linked

Related