4 creative ways to clone objects

There are a lot of ways to clone objects in Javascript, and some of them get pretty creative. jQuery has an excellent method for cloning objects, as does Mootools. There’s a Javascript hack we can sort of “exploit”, or we could just clone our object in plain Javascript. Let’s start with the vanilla Javascript first and move on from there.

1) A vanilla Javascript method for cloning objects

This is a somewhat simple function that will clone an object and return the clone. If a non-object value is passed in, that value is returned.

// recursive function to clone an object. If a non object parameter// is passed in, that parameter is returned and no recursion occurs.

If you try the above function, you’ll see that once bob has been cloned as bill, modifying values on bill won’t change the original values on bob.

2) A clever exploit of the JSON library to deep-clone objects

We can exploit the JSON library for a rather fast way of deep-cloning objects. Check it out:

varbob = {name: "Bob",age: 32};

varbill = (JSON.parse(JSON.stringify(bob)));bill.name = "Bill";

console.log(bob);console.log(bill);

This method is nice and fast (faster as a rule than the jQuery method and possibly the Mootools function as well), and certainly rather less code than the first example. Plus, it’s pretty clever–just make sure you add a comment explaining what you’re doing. Otherwise, it could cause quite a bit of confusion!

3) Using jQuery’s $.extend() function

jQuery has a method that can be used to deep-clone objects, the $.extend() function. Let’s take a look at how it can be used:

varbob = {name: "Bob",age: 32};

varbill = $.extend(true, {}, bob);bill.name = "Bill";

console.log(bob);console.log(bill);

Pretty handy, eh? This method is a little slower than the JSON exploit, but that shouldn’t really be a problem when you’re only doing a few clones. If you’re doing hundreds or thousands of clones, it might be time to think about the JSON exploit or another solution.

4) Using Mootools’ clone() function to clone objects

Last but not least, the Javascript library Mootools also provides a means of cloning objects–the rather aptly named clone() function. Observe the wild clone() in its natural habitat:

varbob = {name: "Bob",age: 32};

varbill = Object.clone(bob);bill.name = "Bill";

console.log(bob);console.log(bill);

Post navigation

19 thoughts on “4 creative ways to clone objects”

Great article – just a few notes about your vanilla function:I think you mean `new obj.constructor`, because you’re not creating an instance otherwise (just happens to work with your `Object` example, though).

Also an `undefined` value doesn’t work – I recommend `!obj` instead of the `null` check, since all falsy values are not objects anyway.

(Note that recursive objects like `obj.foo = obj` also won’t work but that’s not interesting, usually.)

@Anonymous: Good points–you’re correct on both counts. Thanks for the catches!@Andreas: No, I can’t say I’ve ever tried to clone a Date instance with $.extend(). To be honest, I can’t imagine why I would need to! However, I will make a note of that, thanks for pointing this out.

Well, if you’re trying to clone obj1 it’s not going to do what you think. Have a look at what the Object.create function actually does–obj3 becomes a new object with obj1 as its prototype, so if you change obj1 those properties (if unchanged on obj3) will be changed as well.

You should be aware about JSON “exploit”. As JSON does not stores any function, you will lose them if you apply this method.You must use an the first method instead of using that JSON “exploit”. If you want to go further, you can add that first function as an Object prototype function, using something like this: