Take the 2-minute tour ×

Possible Duplicate:
How to clone js object?

This is another way to create a javascript object (using object literal notation instead of function):

user = {
  name: "Foo",
  email: "bar@baz.com"

Is there a way to clone this object or is it a singleton?

share|improve this question

marked as duplicate by George Stocker Aug 3 '12 at 16:11


JavaScript object != JSON object. The example you provided is a JavaScript object literal; I updated your post accordingly. –  Matt Ball Sep 22 '10 at 22:16
good question! I'll always think that user2 = user will make a copy, but don't. –  Topera Sep 22 '10 at 22:16
Shortest 'answer': yes and yes. ;) –  Marcel Korpel Sep 22 '10 at 22:24
The answer you selected is still not a deep copy..my solution is still the best. –  vol7ron Oct 10 '10 at 20:21
The answer you selected will not produce a different result than using var user2 = user;. Only the clone function is causing the constructor name to be changed. Thats not cloning, thats a duplicate reference !! –  Om Shankar Feb 22 '13 at 17:18

5 Answers 5

up vote 22 down vote accepted

Try this:

var clone = (function(){ 
  return function (obj) { Clone.prototype=obj; return new Clone() };
  function Clone(){}

Here's what's going on.

  • Clone is a dummy constructor.
  • We assign the object we want to clone to the Clone constructor's prototype.
  • We call Clone using 'new', so the constructed object has the original object as its constructor's prototype aka (non-standard) __proto__.

The cloned object will share all the properties of the original object without any copies of anything being made. If properties of the cloned object are assigned new values, they won't interfere with the original object. And no tampering of built-ins is required.

Keep in mind that an object property of the newly-created object will refer to the same object as the eponymous property of the cloned object. Assigning a new value to a property of the clone won't interfere with the original, but assigning values to the clone's object properties will.

Try this in chrome or firebug console:

var user = {
  name: "Foo",
  email: "bar@baz.com"

var clonedUser = clone(user);


A detailed explanation of this cloning technique can be found here.

share|improve this answer
user={name:"",email:"",obj:{a:"A"}}; clonedUser=clone(user);, clonedUser.obj.a="B"; you'll find user.obj.a == "B" –  vol7ron Sep 23 '10 at 0:22
This looks really similar to Chris J's answer too. –  vol7ron Sep 23 '10 at 0:27
vol7ron: yes, because user.obj and clonedUser.obj refer to the same object. Assigning a new value to newUser's obj property will not exhibit this behavior. The request was for a clone, not a copy, and not a deep copy. See the link at the end of my answer. –  Dagg Nabbit Sep 23 '10 at 0:31
@no: very good, if you edit the answer, I'll remove my downvote :) That is correct, but there is a big distinction in the article's definition of the programmatic clone and the vernacular definition of a clone. –  vol7ron Sep 23 '10 at 0:40
Still article definition A cloned is B. A makes changes to property, B sees it. B makes changes to property, A doesn't give a ----. In your example, they would both share a nested object. If B makes changes to that object's property, A should not see the change. In all, cloning is discouraged, deep copying is encouraged. –  vol7ron Sep 23 '10 at 0:49

You can use JSON object (present in modern browsers):

var user = {name: "Foo", email: "bar@baz.com" } 
var user2 = JSON.parse(JSON.stringify(user))

user2.name = "Bar";
alert(user.name + " " + user2.name); // Foo Bar

See in jsfiddle.


If you need this in older browsers, see http://www.json.org/js.html.

share|improve this answer
hmm... not going to downvote you but this is just silly, in my opinion. first of all, if you are going to use JSON, you WILL need to include json2.js in your page because there are still current browsers without native json and there will be in common use those that are not current for some time. Either write or borrow an extend implementation or include a library that has one. –  Sky Sanders Sep 23 '10 at 5:15
I'm just giving another way to do this. If a site already have json2.js, it works. –  Topera Sep 23 '10 at 13:15
If an object has both properties and methods, then my friend, using this JSON style, methods are not cloned –  Om Shankar Feb 22 '13 at 17:14
It's actually not so silly... For example, if you are creating an app for an embedded system, so you always know what browser it is going to run on; and you know it's a data object (so you don't care if the methods get cloned), then this is easy, clean, and safe. It won't work for all applications, but it's perfect for what I want! Thanks! –  user435779 Apr 16 '13 at 16:14

I like to use this:

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        var F = function () {};
        F.prototype = o;
    return new F();

then any object I want to clone can be done as:

user = {
    name: "Foo",
    email: "bar@baz.com"
var user2 = Object.create(user);

As shown in (or similar to) JavaScript The Good Parts

share|improve this answer
You shouldn't do this; see Kangax' answer –  Marcel Korpel Sep 22 '10 at 23:14
@Marcel Thanks for pointing that out. I'll leave my answer as is and recommend Kangax' explanation as a good read. –  Chris J Sep 23 '10 at 0:10
@Marcel/Chris +1; Kangax's answer is only that create doesn't take two properties everywhere. My feeling is if everyone used this method, then it would force vendors to comply to standards. I didn't use FF initially because it didn't display everything correctly, now the web got smarter and FF has made modifications to work better in quirksmode. The same will be true if programmers confine to standards and push the browsers that accept them. –  vol7ron Sep 23 '10 at 0:37
Would be good if Javascript could provide an easy way to clone objects –  never_had_a_name Sep 23 '10 at 7:08
I like that one best of all. –  Mike Thornley Apr 15 '13 at 17:40

Most of the javascript frameworks have good support for object cloning.

var a= {'key':'value'};
var b= jQuery.extend( true, {}, a );
share|improve this answer
Agreed: underscorejs also has a clone method underscorejs.org/#clone –  dreftymac Aug 14 at 18:49


   Object.prototype.clone = function clone(a) {
                               var b = {};
                               for(var p in a) {
                                  else                       {b[p]=a[p];}
                               return b;

   var foo = {
        name:  "Foo"
      , email: "bar@baz.com"
      , obj:   {a:"A",b:"B"}

   var bar   = foo.clone();
   bar.name  = "Bar";
   bar.obj.b = "C";

share|improve this answer
no no no... never mess with Object.prototype, you'll break everything :P –  Dagg Nabbit Sep 22 '10 at 23:38
that is incorrect, unless you're one of the drones that use JQuery, then never mess with anything and forget how to do anything. –  vol7ron Sep 22 '10 at 23:46
Don't get upset. I generally avoid jQuery. Two things, though... 1, this isn't a clone, it's a copy. The name 'cloning' is associated with this sort of technique: oranlooney.com/functional-javascript –  Dagg Nabbit Sep 22 '10 at 23:52
2, don't mess with built-ins like Object and Array, not because of jQuery, but because someone will forget to use hasOwnProperty when iterating objects using in and suddenly they'll have extra properties in there, because another developer modified built-ins without them knowing. –  Dagg Nabbit Sep 22 '10 at 23:54
@no: You make a valid point to remember, but I do not consider that good enough to essentially say "don't mess with prototype". –  vol7ron Sep 23 '10 at 0:11
