How do I correctly clone a JavaScript object?

Question 1

I have an object x. I'd like to copy it as object y, such that changes to y do not modify x. I realized that copying objects derived from built-in JavaScript objects will result in extra, unwanted properties. This isn't a problem, since I'm copying one of my own literal-constructed objects.

Question 2

See this question: stackoverflow.com/questions/122102/…

Question 3

For JSON, I use mObj=JSON.parse(JSON.stringify(jsonObject));

Question 4

I really don't get why no one suggests Object.create(o), it does everything the author asks?

Question 5

var x = { deep: { key: 1 } }; var y = Object.create(x); x.deep.key = 2; After doing this, y.deep.key will also be 2, hence Object.create CAN NOT BE USED for cloning...

Question 6

@r3wt that will not work... Please post only after doing basic test of the solution..

Question 7

2022 update

There's a new JS standard called structured cloning. It works in many browsers (see Can I Use).

const clone = structuredClone(object);

Old answer

To do this for any object in JavaScript will not be simple or straightforward. You will run into the problem of erroneously picking up attributes from the object's prototype that should be left in the prototype and not copied to the new instance. If, for instance, you are adding a clone method to Object.prototype, as some answers depict, you will need to explicitly skip that attribute. But what if there are other additional methods added to Object.prototype, or other intermediate prototypes, that you don't know about? In that case, you will copy attributes you shouldn't, so you need to detect unforeseen, non-local attributes with the hasOwnProperty method.

In addition to non-enumerable attributes, you'll encounter a tougher problem when you try to copy objects that have hidden properties. For example, prototype is a hidden property of a function. Also, an object's prototype is referenced with the attribute __proto__, which is also hidden, and will not be copied by a for/in loop iterating over the source object's attributes. I think __proto__ might be specific to Firefox's JavaScript interpreter and it may be something different in other browsers, but you get the picture. Not everything is enumerable. You can copy a hidden attribute if you know its name, but I don't know of any way to discover it automatically.

Yet another snag in the quest for an elegant solution is the problem of setting up the prototype inheritance correctly. If your source object's prototype is Object, then simply creating a new general object with {} will work, but if the source's prototype is some descendant of Object, then you are going to be missing the additional members from that prototype which you skipped using the hasOwnProperty filter, or which were in the prototype, but weren't enumerable in the first place. One solution might be to call the source object's constructor property to get the initial copy object and then copy over the attributes, but then you still will not get non-enumerable attributes. For example, a Date object stores its data as a hidden member:

function clone(obj) {
 if (null == obj || "object" != typeof obj) return obj;
 var copy = obj.constructor();
 for (var attr in obj) {
 if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
 }
 return copy;
}
var d1 = new Date();
/* Executes function after 5 seconds. */
setTimeout(function(){
 var d2 = clone(d1);
 alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());
}, 5000);

The date string for d1 will be 5 seconds behind that of d2. A way to make one Date the same as another is by calling the setTime method, but that is specific to the Date class. I don't think there is a bullet-proof general solution to this problem, though I would be happy to be wrong!

When I had to implement general deep copying I ended up compromising by assuming that I would only need to copy a plain Object, Array, Date, String, Number, or Boolean. The last 3 types are immutable, so I could perform a shallow copy and not worry about it changing. I further assumed that any elements contained in Object or Array would also be one of the 6 simple types in that list. This can be accomplished with code like the following:

function clone(obj) {
 var copy;
 // Handle the 3 simple types, and null or undefined
 if (null == obj || "object" != typeof obj) return obj;
 // Handle Date
 if (obj instanceof Date) {
 copy = new Date();
 copy.setTime(obj.getTime());
 return copy;
 }
 // Handle Array
 if (obj instanceof Array) {
 copy = [];
 for (var i = 0, len = obj.length; i < len; i++) {
 copy[i] = clone(obj[i]);
 }
 return copy;
 }
 // Handle Object
 if (obj instanceof Object) {
 copy = {};
 for (var attr in obj) {
 if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
 }
 return copy;
 }
 throw new Error("Unable to copy obj! Its type isn't supported.");
}

The above function will work adequately for the 6 simple types I mentioned, as long as the data in the objects and arrays form a tree structure. That is, there isn't more than one reference to the same data in the object. For example:

// This would be cloneable:
var tree = {
 "left" : { "left" : null, "right" : null, "data" : 3 },
 "right" : null,
 "data" : 8
};
// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
 "left" : { "left" : null, "right" : null, "data" : 3 },
 "data" : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];
// Cloning this would cause a stack overflow due to infinite recursion:
var cyclicGraph = {
 "left" : { "left" : null, "right" : null, "data" : 3 },
 "data" : 8
};
cyclicGraph["right"] = cyclicGraph;

It will not be able to handle any JavaScript object, but it may be sufficient for many purposes as long as you don't assume that it will just work for anything you throw at it.

Question 8

This is missing symbol keys and symbol values. Nowadays, using Object.getOwnPropertyDescriptors is better.

Question 9

structuredClone is only 75% compatible globally

Question 10

Update on @JoshuaDavid, currently supported in 82.57% of all browsers.

Question 11

what if I want to clone the object and also want to append something to it?

Question 12

Ran into issues using this function on mobile devices.. - iOS 11,12,13,14, not working on Safari and Google Chrome. (works on iOS 15,16) - Android 12, 11, 10, 9 on SamsungInternet browser (chrome works).

Question 13

If you do not use Dates, functions, undefined, regExp or Infinity within your object, a very simple one liner is JSON.parse(JSON.stringify(object)):

const a = {
 string: 'string',
 number: 123,
 bool: false,
 nul: null,
 date: new Date(), // stringified
 undef: undefined, // lost
 inf: Infinity, // forced to 'null'
}
console.log(a);
console.log(typeof a.date); // Date object
const clone = JSON.parse(JSON.stringify(a));
console.log(clone);
console.log(typeof clone.date); // result of .toISOString()

This works for all kind of objects containing objects, arrays, strings, booleans and numbers.

See also this article about the structured clone algorithm of browsers which is used when posting messages to and from a worker. It also contains a function for deep cloning.

Question 14

sometimes the best answers are the simplest. genius.

Question 15

Helpful, but when comparing objects which contains other objects, I ran through unexpected behaviour when two exactly equal objects where not taken as equals. used JSON.stringify(x) == JSON.stringify(JSON.parse(JSON.stringify(a))) to fix it. For some reason, comparing as strings works perfectly as expected when comparing, could not match otherwise.

Question 16

@AgustinL.Lacuara You cannot compare complex datatypes in JS. a={};b={}; a==b is false. But after a=b it becomes true, because it is not only identical but it is the same object.

Question 17

does the job, but, this is goes against any good programming practice. In brazil, we call that a 'Gambiarra'

Question 18

This is the easiest solution if you don't mind poor performance caused by encoding to string and decoding the data to create new object. The global function structuredClone() is much better if the user base has modern enough JavaScript engines.

Question 19

In ECMAScript 6 there is Object.assign method, which copies values of all enumerable own properties from one object to another. For example:

var x = {myProp: "value"};
var y = Object.assign({}, x);

But be aware this is a shallow copy - nested objects are still copied as reference.

Question 20

With jQuery, you can shallow copy with extend:

var copiedObject = jQuery.extend({}, originalObject)

subsequent changes to the copiedObject will not affect the originalObject, and vice versa.

Or to make a deep copy:

var copiedObject = jQuery.extend(true, {}, originalObject)

Question 21

Per MDN:

If you want shallow copy, use Object.assign({}, a)
For "deep" copy, use JSON.parse(JSON.stringify(a))

There is no need for external libraries but you need to check browser compatibility first.

Question 22

The problem happens when you have functions in your object JSON.parse(JSON.stringify(a))

Question 23

An elegant way to clone a Javascript object in one line of code:

An Object.assign method is part of the ECMAScript 2015 (ES6) standard and does exactly what you need.

var clone = Object.assign({}, obj);

The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object.

starting situation

I want to deep-copy a Javascript Object with all of its children and their children and so on. But since I'm not kind of a normal developer, my Object has normal properties, circular structures and even nested objects.

So let's create a circular structure and a nested object first.

function Circ() {
 this.me = this;
}
function Nested(y) {
 this.y = y;
}

Let's bring everything together in an Object named a.

var a = {
 x: 'a',
 circ: new Circ(),
 nested: new Nested('a')
};

Next, we want to copy a into a variable named b and mutate it.

var b = a;
b.x = 'b';
b.nested.y = 'b';

You know what happened here because if not you wouldn't even land on this great question.

console.log(a, b);
a --> Object {
 x: "b",
 circ: Circ {
 me: Circ { ... }
 },
 nested: Nested {
 y: "b"
 }
}
b --> Object {
 x: "b",
 circ: Circ {
 me: Circ { ... }
 },
 nested: Nested {
 y: "b"
 }
}

Now let's find a solution.

JSON

The first attempt I tried was using JSON.

var b = JSON.parse( JSON.stringify( a ) );
b.x = 'b';
b.nested.y = 'b';

Don't waste too much time on it, you'll get TypeError: Converting circular structure to JSON.

Recursive copy (the accepted "answer")

Let's have a look at the accepted answer.

function cloneSO(obj) {
 // Handle the 3 simple types, and null or undefined
 if (null == obj || "object" != typeof obj) return obj;
 // Handle Date
 if (obj instanceof Date) {
 var copy = new Date();
 copy.setTime(obj.getTime());
 return copy;
 }
 // Handle Array
 if (obj instanceof Array) {
 var copy = [];
 for (var i = 0, len = obj.length; i < len; i++) {
 copy[i] = cloneSO(obj[i]);
 }
 return copy;
 }
 // Handle Object
 if (obj instanceof Object) {
 var copy = {};
 for (var attr in obj) {
 if (obj.hasOwnProperty(attr)) copy[attr] = cloneSO(obj[attr]);
 }
 return copy;
 }
 throw new Error("Unable to copy obj! Its type isn't supported.");
}

Looks good, heh? It's a recursive copy of the object and handles other types as well, like Date, but that wasn't a requirement.

var b = cloneSO(a);
b.x = 'b';
b.nested.y = 'b';

Recursion and circular structures doesn't work well together... RangeError: Maximum call stack size exceeded

native solution

After arguing with my co-worker, my boss asked us what happened, and he found a simple solution after some googling. It's called Object.create.

var b = Object.create(a);
b.x = 'b';
b.nested.y = 'b';

This solution was added to Javascript some time ago and even handles circular structure.

console.log(a, b);
a --> Object {
 x: "a",
 circ: Circ {
 me: Circ { ... }
 },
 nested: Nested {
 y: "b"
 }
}
b --> Object {
 x: "b",
 circ: Circ {
 me: Circ { ... }
 },
 nested: Nested {
 y: "b"
 }
}

... and you see, it didn't work with the nested structure inside.

polyfill for the native solution

There's a polyfill for Object.create in the older browser just like the IE 8. It's something like recommended by Mozilla, and of course, it's not perfect and results in the same problem as the native solution.

function F() {};
function clonePF(o) {
 F.prototype = o;
 return new F();
}
var b = clonePF(a);
b.x = 'b';
b.nested.y = 'b';

I've put F outside the scope so we can have a look at what instanceof tells us.

console.log(a, b);
a --> Object {
 x: "a",
 circ: Circ {
 me: Circ { ... }
 },
 nested: Nested {
 y: "b"
 }
}
b --> F {
 x: "b",
 circ: Circ {
 me: Circ { ... }
 },
 nested: Nested {
 y: "b"
 }
}
console.log(typeof a, typeof b);
a --> object
b --> object
console.log(a instanceof Object, b instanceof Object);
a --> true
b --> true
console.log(a instanceof F, b instanceof F);
a --> false
b --> true

Same problem as the native solution, but a little bit worse output.

the better (but not perfect) solution

When digging around, I found a similar question (In Javascript, when performing a deep copy, how do I avoid a cycle, due to a property being "this"?) to this one, but with a way better solution.

function cloneDR(o) {
 const gdcc = "__getDeepCircularCopy__";
 if (o !== Object(o)) {
 return o; // primitive value
 }
 var set = gdcc in o,
 cache = o[gdcc],
 result;
 if (set && typeof cache == "function") {
 return cache();
 }
 // else
 o[gdcc] = function() { return result; }; // overwrite
 if (o instanceof Array) {
 result = [];
 for (var i=0; i<o.length; i++) {
 result[i] = cloneDR(o[i]);
 }
 } else {
 result = {};
 for (var prop in o)
 if (prop != gdcc)
 result[prop] = cloneDR(o[prop]);
 else if (set)
 result[prop] = cloneDR(cache);
 }
 if (set) {
 o[gdcc] = cache; // reset
 } else {
 delete o[gdcc]; // unset again
 }
 return result;
}
var b = cloneDR(a);
b.x = 'b';
b.nested.y = 'b';

And let's have a look at the output...

console.log(a, b);
a --> Object {
 x: "a",
 circ: Object {
 me: Object { ... }
 },
 nested: Object {
 y: "a"
 }
}
b --> Object {
 x: "b",
 circ: Object {
 me: Object { ... }
 },
 nested: Object {
 y: "b"
 }
}
console.log(typeof a, typeof b);
a --> object
b --> object
console.log(a instanceof Object, b instanceof Object);
a --> true
b --> true
console.log(a instanceof F, b instanceof F);
a --> false
b --> false

The requirements are matched, but there are still some smaller issues, including changing the instance of nested and circ to Object.

The structure of trees that share a leaf won't be copied, they will become two independent leaves:

 [Object] [Object]
 / \ / \
 / \ / \
 |/_ _\| |/_ _\| 
 [Object] [Object] ===> [Object] [Object]
 \ / | |
 \ / | |
 _\| |/_ \|/ \|/
 [Object] [Object] [Object]

conclusion

The last solution using recursion and a cache, may not be the best, but it's a real deep-copy of the object. It handles simple properties, circular structures and nested object, but it will mess up the instance of them while cloning.

jsfiddle

Question 29

so the conlcusion is to avoid that problem :)

Question 30

@mikus until there's a real specification which covers more than just the basic use cases, yes.

Question 31

An okay analysis of the solutions provided above but the conclusion drawn by the author indicates that there is no solution to this question.

Question 32

It is shame that JS not includes native clone function.

Question 33

Among all the top answers, I feel this is close to the correct one.

Question 34

If you're okay with a shallow copy, the underscore.js library has a clone method.

y = _.clone(x);

or you can extend it like

copiedObject = _.extend({},originalObject);

Question 35

To get started quickly with lodash, I'd recommend learning npm, Browserify, as well as lodash. I got clone to work with 'npm i --save lodash.clone' and then 'var clone = require('lodash.clone');' To get require to work, you need something like browserify. Once you install it and learn how it works, you’ll use 'browserify yourfile.js > bundle.js;start chrome index.html' every time you run your code (instead of going into Chrome directly). This gathers your file and all the files you required from the npm module into bundle.js. You can probably save time and automate this step with Gulp though.

Question 36

OK, imagine you have this object below and you want to clone it:

let obj = {a:1, b:2, c:3}; //ES6

or

var obj = {a:1, b:2, c:3}; //ES5

the answer is mainly depeneds on which ECMAscript you using, in ES6+, you can simply use Object.assign to do the clone:

let cloned = Object.assign({}, obj); //new {a:1, b:2, c:3};

or using spread operator like this:

let cloned = {...obj}; //new {a:1, b:2, c:3};

But if you using ES5, you can use few methods, but the JSON.stringify, just make sure you not using for a big chunk of data to copy, but it could be one line handy way in many cases, something like this:

let cloned = JSON.parse(JSON.stringify(obj)); 
//new {a:1, b:2, c:3};, can be handy, but avoid using on big chunk of data over and over

Question 37

Can you please give example of what big chunk of data would equate to? 100kb? 100MB? Thanks!

Question 38

Yes, @user1063287, that basically the bigger data, the performnce worse... so it really depends, not a kb, mb or gb, it's more about how many times you wanna do that also... Also it won't work for functions and other stuffs...

Question 39

Object.assign makes a shallow copy (just as the spread, @Alizera)

Question 40

You can't use let in es5 :^) @Alireza

Question 41

Update 06 July 2020

There are three (3) ways to clone objects in JavaScript. As objects in JavaScript are reference values, you can't simply just copy using the =.

The ways are:

const food = { food: 'apple', drink: 'milk' }
// 1. Using the "Spread"
// ------------------
{ ...food }
// 2. Using "Object.assign"
// ------------------
Object.assign({}, food)
// 3. "JSON"
// ------------------
JSON.parse(JSON.stringify(food))
// RESULT:
// { food: 'apple', drink: 'milk' }

This can be used as a reference summary.

Question 42

And this adds what new/unique information to this question?

Question 43

The JSON approach would remove any methods of the object

Question 44

To create a string from an object and then parsing that string into another object just to copy the object is a kind of Monty Python's style of programming :-D

Question 45

This only works for object literals and objects that can be represented as such, but not for generic "objects" like you encounter in OO languages. This seems to be what the OP asked for thus that's OK, but it' not a universal solution for every kind of object.

Question 46

The spread operator and Object.assign fail for objects with a hierarchy, ie. nested objects. JSON.parse/stringify works, but as mentioned does not copy methods.

Question 47

One particularly inelegant solution is to use JSON encoding to make deep copies of objects that do not have member methods. The methodology is to JSON encode your target object, then by decoding it, you get the copy you are looking for. You can decode as many times as you want to make as many copies as you need.

Of course, functions do not belong in JSON, so this only works for objects without member methods.

This methodology was perfect for my use case, since I'm storing JSON blobs in a key-value store, and when they are exposed as objects in a JavaScript API, each object actually contains a copy of the original state of the object so we can calculate the delta after the caller has mutated the exposed object.

var object1 = {key:"value"};
var object2 = object1;
object2 = JSON.stringify(object1);
object2 = JSON.parse(object2);
object2.key = "a change";
console.log(object1);// returns value

Question 48

Why don't functions belong to JSON? I've seen them transfered as JSON more then once...

Question 49

Functions are not part of the JSON spec becuase they are not a secure (or smart) way to transfer data, which is what JSON was made for. I know the native JSON encoder in Firefox simply ignores functions passed to it, but I'm not sure about the behavior of others.

Question 50

@mark: { 'foo': function() { return 1; } } is a literal-constructed object.

Question 51

@abarnert functions are not data. "Function literals" is a misnomer - since functions can contain arbitrary code, including assignments and all sort of "non-serializable" things.

Question 52

You can simply use a spread property to copy an object without references. But be careful (see comments), the 'copy' is just on the lowest object/array level. Nested properties are still references!

Complete clone:

let x = {a: 'value1'}
let x2 = {...x}
// => mutate without references:
x2.a = 'value2'
console.log(x.a) // => 'value1'

Clone with references on second level:

const y = {a: {b: 'value3'}}
const y2 = {...y}
// => nested object is still a references:
y2.a.b = 'value4'
console.log(y.a.b) // => 'value4'

JavaScript actually does not support deep clones natively. Use an utility function. For example Ramda:

http://ramdajs.com/docs/#clone

Question 53

This not working... it would work probably when x will be an array for instance x= [ 'ab','cd',...]

Question 54

This works, but bear in mind this is a SHALLOW copy, therefore any deep references to others objects remain references!

Question 55

A partial clone can also happen in this way: const first = {a: 'foo', b: 'bar'}; const second = {...{a} = first}

Question 56

const objClone = { ...obj };

Be aware that nested objects are still copied as a reference.

Question 57

Thanks for the hint that nested objects are still copied as a reference! I almost got crazy when debugging my code because I modified nested properties on the "clone" but the original got modified.

Question 58

This is ES2016, not 2018, and this answer was given two years earlier.

Question 59

so what if i want copy of nested property as well

Question 60

@SunilGarg To copy nested property as well you can use const objDeepClone = JSON.parse(JSON.stringify(obj));

Question 61

From this article: How to copy arrays and objects in Javascript by Brian Huisman:

Object.prototype.clone = function() {
 var newObj = (this instanceof Array) ? [] : {};
 for (var i in this) {
 if (i == 'clone') continue;
 if (this[i] && typeof this[i] == "object") {
 newObj[i] = this[i].clone();
 } else newObj[i] = this[i]
 } return newObj;
};

Question 62

This is close, but doesn't work for any object. Try cloning a Date object with this. Not all properties are enumerable, so they will not all show up in the for/in loop.

Question 63

Adding to the object prototype like this broke jQuery for me. Even when I renamed to clone2.

Question 64

@iPadDeveloper2011 The code above had a bug in it where it created a global variable called 'i' '(for i in this)', rather than '(for var i in this)'. I have enough karma to edit and it and fix it so I did.

A. Levy A. Levy 30.9k6 gold badges41 silver badges56 bronze badges · Accepted Answer · 2009-04-08 05:58:23Z

2022 update

There's a new JS standard called structured cloning. It works in many browsers (see Can I Use).

const clone = structuredClone(object);

Old answer

To do this for any object in JavaScript will not be simple or straightforward. You will run into the problem of erroneously picking up attributes from the object's prototype that should be left in the prototype and not copied to the new instance. If, for instance, you are adding a clone method to Object.prototype, as some answers depict, you will need to explicitly skip that attribute. But what if there are other additional methods added to Object.prototype, or other intermediate prototypes, that you don't know about? In that case, you will copy attributes you shouldn't, so you need to detect unforeseen, non-local attributes with the hasOwnProperty method.

In addition to non-enumerable attributes, you'll encounter a tougher problem when you try to copy objects that have hidden properties. For example, prototype is a hidden property of a function. Also, an object's prototype is referenced with the attribute __proto__, which is also hidden, and will not be copied by a for/in loop iterating over the source object's attributes. I think __proto__ might be specific to Firefox's JavaScript interpreter and it may be something different in other browsers, but you get the picture. Not everything is enumerable. You can copy a hidden attribute if you know its name, but I don't know of any way to discover it automatically.

Yet another snag in the quest for an elegant solution is the problem of setting up the prototype inheritance correctly. If your source object's prototype is Object, then simply creating a new general object with {} will work, but if the source's prototype is some descendant of Object, then you are going to be missing the additional members from that prototype which you skipped using the hasOwnProperty filter, or which were in the prototype, but weren't enumerable in the first place. One solution might be to call the source object's constructor property to get the initial copy object and then copy over the attributes, but then you still will not get non-enumerable attributes. For example, a Date object stores its data as a hidden member:

function clone(obj) {
 if (null == obj || "object" != typeof obj) return obj;
 var copy = obj.constructor();
 for (var attr in obj) {
 if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
 }
 return copy;
}
var d1 = new Date();
/* Executes function after 5 seconds. */
setTimeout(function(){
 var d2 = clone(d1);
 alert("d1 = " + d1.toString() + "\nd2 = " + d2.toString());
}, 5000);

The date string for d1 will be 5 seconds behind that of d2. A way to make one Date the same as another is by calling the setTime method, but that is specific to the Date class. I don't think there is a bullet-proof general solution to this problem, though I would be happy to be wrong!

When I had to implement general deep copying I ended up compromising by assuming that I would only need to copy a plain Object, Array, Date, String, Number, or Boolean. The last 3 types are immutable, so I could perform a shallow copy and not worry about it changing. I further assumed that any elements contained in Object or Array would also be one of the 6 simple types in that list. This can be accomplished with code like the following:

function clone(obj) {
 var copy;
 // Handle the 3 simple types, and null or undefined
 if (null == obj || "object" != typeof obj) return obj;
 // Handle Date
 if (obj instanceof Date) {
 copy = new Date();
 copy.setTime(obj.getTime());
 return copy;
 }
 // Handle Array
 if (obj instanceof Array) {
 copy = [];
 for (var i = 0, len = obj.length; i < len; i++) {
 copy[i] = clone(obj[i]);
 }
 return copy;
 }
 // Handle Object
 if (obj instanceof Object) {
 copy = {};
 for (var attr in obj) {
 if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);
 }
 return copy;
 }
 throw new Error("Unable to copy obj! Its type isn't supported.");
}

The above function will work adequately for the 6 simple types I mentioned, as long as the data in the objects and arrays form a tree structure. That is, there isn't more than one reference to the same data in the object. For example:

// This would be cloneable:
var tree = {
 "left" : { "left" : null, "right" : null, "data" : 3 },
 "right" : null,
 "data" : 8
};
// This would kind-of work, but you would get 2 copies of the 
// inner node instead of 2 references to the same copy
var directedAcylicGraph = {
 "left" : { "left" : null, "right" : null, "data" : 3 },
 "data" : 8
};
directedAcyclicGraph["right"] = directedAcyclicGraph["left"];
// Cloning this would cause a stack overflow due to infinite recursion:
var cyclicGraph = {
 "left" : { "left" : null, "right" : null, "data" : 3 },
 "data" : 8
};
cyclicGraph["right"] = cyclicGraph;

It will not be able to handle any JavaScript object, but it may be sufficient for many purposes as long as you don't assume that it will just work for anything you throw at it.

This is missing symbol keys and symbol values. Nowadays, using Object.getOwnPropertyDescriptors is better.
Update on @JoshuaDavid, currently supported in 82.57% of all browsers.
what if I want to clone the object and also want to append something to it?
Ran into issues using this function on mobile devices.. - iOS 11,12,13,14, not working on Safari and Google Chrome. (works on iOS 15,16) - Android 12, 11, 10, 9 on SamsungInternet browser (chrome works).

CollectivesTM on Stack Overflow

How do I correctly clone a JavaScript object?

83 Answers 83

2022 update

Old answer

starting situation

JSON

Recursive copy (the accepted "answer")

native solution

polyfill for the native solution

the better (but not perfect) solution

conclusion

Update 06 July 2020

Performance

Results for shallow copy

Results for deep copy

Details

Structured Cloning

Function

// Tests

References

Language tricks used

Linked

Hot Network Questions

CollectivesTM on Stack Overflow

83 Answers 83

2022 update

Old answer

starting situation

JSON

Recursive copy (the accepted "answer")

native solution

polyfill for the native solution

the better (but not perfect) solution

conclusion

Update 06 July 2020

Performance

Results for shallow copy

Results for deep copy

Details

Structured Cloning

Function

// Tests

References

Language tricks used

Linked

Related