Clone Anything with JavaScript

Discussion

1. wiky

   There are an idea to clone an object(or array) by JSON method without deep traversal:

   function clone (src) {
       return JSON.parse(JSON.stringify(src));
   }
   

   But it only supports to clone Object and need JSON support.
2. Steve

   Thanks David… I’m sure at some point this might be handy… ditto WIKY… that’s a great *simple* approach… I wonder if there’s any issues with that? (other than lack of support on legacy browsers)
3. Andres D

   David, see this for clone funcion http://stackoverflow.com/questions/1833588/javascript-clone-a-function
   run example http://jsfiddle.net/adescalzo/2hTJj/
4. Miller Medeiros

   I implemented something similar on amd-utils/lang/clone. It handles RegExp flags properly (missing on the snippet above) and avoid IE don’t enum bug. I also find the code more readable ;-D

   Element.cloneNode(true) is so easy to type that I don’t think it’s worth the overhead on the clone() method, I would definitely keep it just to JavaScript natives.

   Cheers.
5. Rasmus Fløe

   The dojo source is scary! :(

   The intent is good but…

   I don’t understand why they wouldn’t just use hasOwnProperty instead of having an empty object and checking against that. Yikes. Must have a good reason I guess… :/

   And then there’s the rather naive expectation that typeof would ever return “array”!?
   
if(src && (src instanceof Array || typeof src == "array")){

• David Walsh

  I am seeing that now; I’ll bring it up with the Dojo team, as these items are quite odd.
• David Walsh

  OK, the SRC check in that statement was my bad on the translation. The typeof does exist in Dojo, not sure why that’s there.
6. Paul Bronshteyn

   Looping though the arrays to clone then is slow, using native methods are much faster:

   r = src.concat([]);
• Miller Medeiros

  concat doesn’t do a deep clone (objects and arrays inside of it aren’t cloned).
• christ almighty

  what you’re describing is not a “deep clone”.

  any non-primitive item (Array, Object, etc) in the Array will be passed as a reference, it will not be a copy, so changing an item in the cloned Array (e.g. popping an item off an Array nested within it) will also alter the original.

  this may or may not be the behaviour you want, but it is important enough for me to come back down to earth and school your sorry @$$ as to why you should think before you comment.
7. christ almighty

   Without including all the implementation faff, a more sexual solution might look like:

   var clone = function() {
       function mixin( dest, source, copyFunc ) {}
   
       return function clone( src ) {
   
           var type = Object.prototype.toString.call( src ).substring( 8 ).split( ']' )[0].toLowerCase();
       
           switch ( type ) {
               case 'function'  : break;
               case 'array'     : break;
               case 'object'    : 
                   if ( !src.constructor || src.constructor === Object ) {} // <- handles Object.create( null );
                   else return new src.constructor();
                   break;
               case 'regexp'    : break;
               case 'date'      : break;
               case 'undefined' : case 'null' : break;
               default          : 
                   if ( type.indexOf( 'html' ) === 0 ) {}
           }
           return mixin( /*r, src, clone */ );
       };
   }();
   

   switch always looks more sexual, your making the switch, it’s definite, you’re an attractive assertive go getter. A bunch of ifs? too iffy… also, moving the mixin function out of the clone function is mucho nice-u and mean you’re not recreating it each time this method is called!

   jesus, just sayin’….
• christ almighty

  formatting!!! :P
8. psychedesire

   Hello ! I am Japanese !
   I am Beginner of Javascript.
   This code will do bad?

   var clone = function(o){
   	var Clone = function(o){
   		var self = this;
   		if(o instanceof Array){
   			for(var i = 0,l = o.length;i < l;++ i){
   				self[i] = o[i];
   			}
   		}else{
   			for(var n in o){
   				self[n] = o[n];
   			}
   		}
   	};
   	if((!o)||(typeof(o) !== "object")){
   		return o;
   	}else{
   		o = new Clone(o);
   		return o;
   	}
   };
   
   myObject = {foo:"bar",deep:{func:function(){alert("do something");}}};
   var cloned = clone(myObject);
   alert(cloned.foo) //bar
   myObject.foo = "bbbbbbbb";
   alert(cloned.foo) //bar
   cloned.deep.func(); // do something
   
9. jhuesos

   I was checking briefly the code and I found this line:

   if(src instanceof Array){

   Which is consider not the best way to check if a variable is an Array (it won’t work when dealing with multi-frames).
10. BitDagger

    @JHUESOS

    What’s the proper way of checking that then?
11. Francisc

    Hey David,

    Awesome post.
    A question though, should typeof src!="object" be typeof src!=="object"?
• Me

  typeof will always return a string
12. Markus Staab

    When jquery is available it is rather easy

    Clone object: clone = jQuery.extend({}, obj);

    Clone array: clone = jQuery.extend([], arr);
13. Cody

    For arrays, a more traditional way is:

    var arr = [1,2,3];
    var newArr = arr.slice(0);  // zero is optional
    console.log(arr === newArr, newArr);
    

    But this is probably outside of what David is actually aiming to accomplish as his function uses autonomy.

    Thanks David!
14. André Padez

    Dave, I changed the repo, and a bit of the code:
    (if you can delete my previous comment)
    https://github.com/andrepadez/better-objects

    Object.prototype.clone = function() {
        var theClone;
    
        var traverseObject = function(obj, clone){
            Object.keys(obj).forEach(function(key){
                if(Array.isArray(obj[key])){
                    clone[key] = traverseArray(obj[key])
                } 
                else if(typeof obj[key] === 'object'){
                    clone[key] = {};
                    traverseObject(obj[key], clone[key]);
                } 
                //we don't clone functions for performance reasons
                // else if(typeof obj[key] === 'function'){
                //     clone[key] = eval(obj[key].toString());
                // }
                else {
                    clone[key] = obj[key];
                }
            });
        };
    
        var traverseArray = function(arr){
            var finalArray = [];
            arr.forEach(function(item){
                if(Array.isArray(item)){
                    finalArray.push( traverseArray(item) );
                }
                else if(typeof item === 'object'){
                    var newObj = {};
                    traverseObject(item, newObj)
                    finalArray.push( newObj );
                } 
                else {
                    finalArray.push(item);
                }
            });
            return finalArray;
        }; 
    
        if( Array.isArray(this) ){
            theClone = traverseArray(this);
        } else {
            theClone = {};
            traverseObject(this, theClone);    
        }
        
        return theClone;
    };
    
15. Robin Cafolla

    Hi David,

    You may want to add the following to allow cloning of TypedArrays

    if(Object.prototype.toString.call(src.buffer) === "[object ArrayBuffer]"){
        return new src.constructor( src );
    }
    
16. Andy

    You probably don’t want to go implementing your own clone method – just use the NPM clone package https://www.npmjs.com/package/clone which is actively maintained, and handles circular dependencies. However, the npm package may not clone DOM nodes, but you should probably just us the native browser API if you really have to do that. This isn’t a wheel you need to reinvent!
17. Geoffrey D Hoffman

    If I have a js file that uses Facebook, it calls fbq(‘init’… then another script also calls fbq(‘init’… so how do I ensure that I get my version? Of course this is all happening on a 3rd party site I don’t control, I can only control my script. I need to ensure that subsequent calls to fbq have the correct ID. Do you have any suggestions?