jquery.extend(true, [], obj) not creating a deep copy

Question

If deep copying worked, the output would be "Curious George" and not "Ender's Game". How can I make a deep copy? An answer to this question indicates that $.extend(true, [], obj) creates a deep copy. Yet my example shows that it doesn't.

function Person(){}
Person.prototype.favorite_books = [];

var george = new Person();
george.favorite_books = ["Curious George"];

var kate = new Person();
kate.favorite_books = ["The Da Vinci Code", "Harry Potter"];

var people = [kate, george];

var people_copy = $.extend(true, [], people);
people_copy[0].favorite_books[0] = "Ender's Game";

$('#text').text(people[0].favorite_books[0]);

SOLUTION

I updated the jsFiddle. It turns out I need to deep copy each object in the array individually if the object is a custom object (that is, $.isPlainObject returns false).

okay so browse .extend source code and see why the recursive function isn't copying attributes — Paul Sullivan
– Paul Sullivan, Commented May 12, 2013 at 22:45
@karthikr: have you even read this question and the answer you've referred? — zerkms
– zerkms, Commented May 12, 2013 at 22:49
"It turns out I need to deep copy each object in the array individually." ... if only you're custom objects — zerkms
– zerkms, Commented May 12, 2013 at 23:06

Peter Mortensen · Accepted Answer · 2016-07-22 18:02:58Z

21

And now here is the real answer:

At the moment jQuery can only clone plain JavaScript Objects, while you're using custom ones. And that's obvious, since jQuery cannot know how exactly to instantiate a new custom object. So this works as expected:

var george = {};
george.favorite_books = ["Curious George"];

var kate = {};
kate.favorite_books = ["The Da Vinci Code", "Harry Potter"];

var people = [kate, george];

var people_copy = $.extend(true, [], people);

console.log(people_copy[0].favorite_books == people[0].favorite_books);

Reference to a jQuery code: https://github.com/jquery/jquery/blob/master/src/core.js#L305

See that it checks if it's jQuery.isPlainObject(copy) or it's an array. Otherwise it performs just a reference copy.

edited Jul 22, 2016 at 18:02

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered May 12, 2013 at 23:00

zerkms

256k73 gold badges447 silver badges551 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zerkms Over a year ago

@Rose Perrone: because you have created a deep copy. So the original object is kept as is, and the modified one is modified independently. Not sure what is confusing you.

zerkms Over a year ago

@RoyiNamir you specified that it should be a deep copy (the first argument)

zerkms Over a year ago

Please check what first boolean argument in $.extend function call means. And ask another question if it's still not clear for you.

Peter Mortensen · Accepted Answer · 2016-07-22 18:06:21Z

9

This is how I've done it after trying many approaches:

var newArray = JSON.parse(JSON.stringify(orgArray));

This will create a new deep copy, not a shallow copy.

Also this obviously will not clone events and functions, but the good thing is you can do it in one line, and it can be used for any king of object (arrays, strings, numbers, objects, etc.).

edited Jul 22, 2016 at 18:06

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Apr 23, 2014 at 13:36

Chtioui Malek

11.6k1 gold badge76 silver badges70 bronze badges

Comments

Adam Jenkins · Accepted Answer · 2013-05-12 22:49:08Z

4

Interesting....it doesn't look like it deep copies arrays.

You have to deep copy each object individually.

var people_copy = [];
$.each(people,function(i,obj) {
    people_copy.push($.extend(true,{},obj)); 
});

EDIT: Sure, look at this fork of the OP's fiddle:

http://jsfiddle.net/s2bLv/4/

answered May 12, 2013 at 22:49

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

3 Comments

zerkms Over a year ago

"deep copies objects, not arrays" --- any proofs for that? Isn't array a special kind of object?

zerkms Over a year ago

github.com/jquery/jquery/blob/master/src/core.js#L305 - it should handle arrays

nnnnnn Over a year ago

If you have to deep copy each object individually you would need some recursive code to copy all the way down - unless this is only supposed to cover the OP's simple test case rather than being a generic solution?

Collectives™ on Stack Overflow

jquery.extend(true, [], obj) not creating a deep copy

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related