Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Deep Cloning an Object

Newbie
  
Join Date: Sep 2007
Posts: 17
#1: Sep 28 '07
How does one perform a deep clone (by value, not by reference) to an object in JavaScript?

gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,246
#2: Sep 29 '07

re: Deep Cloning an Object

hi ...

you may use something like the following:

Expand|Select|Wrap|Line Numbers
  1. var a = {
  2.    foo   : { test: 1, test1: 2 },
  3.    bar   : function(a) { alert(a) },
  4.    foobar: 'foobar1'
  5. };
  6.  
  7. function clone_obj(obj) {
  8.     var c = {};
  9.  
  10.     for (var i in obj) {
  11.         var prop = obj[i];
  12.  
  13.         if (typeof prop == 'object') {
  14.            c[i] = clone_obj(prop);
  15.         } else {
  16.            c[i] = prop;
  17.         }
  18.     }
  19.  
  20.     return c;
  21. }
  22.  
  23. var b = clone_obj(a);
  24.  
kind regards

ps: if you encounter problems with that let me know :)
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,246
#3: Sep 29 '07

re: Deep Cloning an Object

hmm ... we have to improve it for properties that are arrays ... :)
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,246
#4: Sep 29 '07

re: Deep Cloning an Object

improved version:

Expand|Select|Wrap|Line Numbers
  1. var a = {
  2.    foo   : { test: 1, test1: 2 },
  3.    bar   : function(a) { alert(a) },
  4.    foobar: 'foobar1',
  5.    arr   : [1, 2, 3, 4]
  6. };
  7.  
  8. function clone_obj(obj) {
  9.     var c = {};
  10.  
  11.     for (var i in obj) {
  12.         var prop = obj[i];
  13.  
  14.         if (typeof prop == 'object') {
  15.            if (prop instanceof Array) {
  16.                c[i] = [];
  17.  
  18.                for (var j = 0; j < prop.length; j++) {
  19.                    c[i].push(prop[j]);
  20.                }
  21.            } else {
  22.                c[i] = clone_obj(prop);
  23.            }
  24.         } else {
  25.            c[i] = prop;
  26.         }
  27.     }
  28.  
  29.     return c;
  30. }
  31.  
  32. var b = clone_obj(a);
  33.  
kind regards
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,246
#5: Sep 29 '07

re: Deep Cloning an Object

arrrgh ... next testcase to check for :)

now the function is to be improved for the case that objects are contained i an array:

Expand|Select|Wrap|Line Numbers
  1. var a = {
  2.    foo   : { test: 1, test1: 2 },
  3.    bar   : function(a) { alert(a) },
  4.    foobar: 'foobar1',
  5.    arr   : [1, [8, 9], {1: 1, 2: 2}, 4]
  6. };
  7.  
  8. function clone_obj(obj) {
  9.     var c = obj instanceof Array ? [] : {};
  10.  
  11.     for (var i in obj) {
  12.         var prop = obj[i];
  13.  
  14.         if (typeof prop == 'object') {
  15.            if (prop instanceof Array) {
  16.                c[i] = [];
  17.  
  18.                for (var j = 0; j < prop.length; j++) {
  19.                    if (typeof prop[j] != 'object') {
  20.                        c[i].push(prop[j]);
  21.                    } else {
  22.                        c[i].push(clone_obj(prop[j]));
  23.                    }
  24.                }
  25.            } else {
  26.                c[i] = clone_obj(prop);
  27.            }
  28.         } else {
  29.            c[i] = prop;
  30.         }
  31.     }
  32.  
  33.     return c;
  34. }
  35.  
  36. var b = clone_obj(a);
  37.  
kind regards
Newbie
  
Join Date: Sep 2007
Posts: 17
#6: Sep 29 '07

re: Deep Cloning an Object

Quote:

Originally Posted by gits

arrrgh ... next testcase to check for :)

now the function is to be improved for the case that objects are contained i an array:

Expand|Select|Wrap|Line Numbers
  1. var a = {
  2.    foo   : { test: 1, test1: 2 },
  3.    bar   : function(a) { alert(a) },
  4.    foobar: 'foobar1',
  5.    arr   : [1, [8, 9], {1: 1, 2: 2}, 4]
  6. };
  7.  
  8. function clone_obj(obj) {
  9.     var c = obj instanceof Array ? [] : {};
  10.  
  11.     for (var i in obj) {
  12.         var prop = obj[i];
  13.  
  14.         if (typeof prop == 'object') {
  15.            if (prop instanceof Array) {
  16.                c[i] = [];
  17.  
  18.                for (var j = 0; j < prop.length; j++) {
  19.                    if (typeof prop[j] != 'object') {
  20.                        c[i].push(prop[j]);
  21.                    } else {
  22.                        c[i].push(clone_obj(prop[j]));
  23.                    }
  24.                }
  25.            } else {
  26.                c[i] = clone_obj(prop);
  27.            }
  28.         } else {
  29.            c[i] = prop;
  30.         }
  31.     }
  32.  
  33.     return c;
  34. }
  35.  
  36. var b = clone_obj(a);
  37.  
kind regards


Thanks, but this code gives me an error:
Error: too much recursion

When I try to clone a <td> object...
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,246
#7: Sep 29 '07

re: Deep Cloning an Object

you cannot clone dom-objects with that ... for that you can use regular dom methods ... cloneNode();

kind regards
Newbie
  
Join Date: Sep 2007
Posts: 17
#8: Sep 29 '07

re: Deep Cloning an Object

Quote:

Originally Posted by gits

you cannot clone dom-objects with that ... for that you can use regular dom methods ... cloneNode();

kind regards

This one works.
Thanks :)
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,246
#9: Sep 29 '07

re: Deep Cloning an Object

hi ...

glad you got it working ... post back to the forum anytime you have more questions ...

kind regards
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,155 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved