Clone "sub-array" of an array of objects (where objects are deeply nested)

Question

Question 1. I was wondering why

JSON.parse(JSON.stringify(obj.slice(1, 3))) and
obj.slice(1,3)

give the same nested array of objects as output since obj.slice(1,3) is not supposed to clone nested objects properly?

Question 2. Is JSON.parse(JSON.stringify(obj.slice(1, 3))) the right way to deep clone a sub-array?

obj details -

var obj= [{ name: "wfwfwfw.)csdfsd",
        tags: [ "dfbdf>>sfdfds", "fsdfsdf&fsfd" ],
        newer: { first: "this'one", second: ["that>.one", "another.'one"], third: {something: "some/>fded", newthing: "ddasd..>sqw"}     },
        final: [ {gh: "ty/fgfg", hj: "rt((ssds"}, {gh: "dqqq...g", hj: "gnm))s"} ]
},
{ name: "wfwfwwwwwwfw.)csdfsd",
        tags: [ "dfbdf>>sfdfds", "fsdfsdf&fsfd" ],
        newer: { first: "this'one", second: ["that>.one", "another.'one"], third: {something: "some/>fded", newthing: "ddasd..>sqw"} },
        final: [ {gh: "ty/fgfg", hj: "rt((ssds"}, {gh: "dqqq...g", hj: "gnm))s"}]
},
{ name: "aa.)csdfsd",
        tags: [ "dfbdf>>sfdfds", "fsdfsdf&fsfd" ],
        newer: { first: "this'one", second: ["that>.one", "another.'one"], third: {something: "some/>fded", newthing: "ddasd..>sqw"} },
        final: [ {gh: "ty/fgfg", hj: "rt((ssds"}, {gh: "dqqq...g", hj: "gnm))s"}]
},
{ name: "nn.)csdfsd",
        tags: [ "dfbdf>>sfdfds", "fsdfsdf&fsfd" ],
        newer: { first: "this'one", second: ["that>.one", "another.'one"], third: {something: "some/>fded", newthing: "ddasd..>sqw"} },
        final: [ {gh: "ty/fgfg", hj: "rt((ssds"}, {gh: "dqqq...g", hj: "gnm))s"}]
}]

`obj.slice(1,3)` and `JSON.parse(JSON.stringify(obj.slice(1, 3)))` give the same output because they do exactly the same thing. One just takes longer to get there. — Tibrogargan, Oct 13 '16 at 06:48
Does that mean that obj.slice(1,3) can be used for deep cloning objects? — vjjj, Oct 13 '16 at 06:52
No. slice is just copying references. The references in the result returned by `obj,slice` are the same ones as in `obj`. `JSON.stringify` creates strings from your objects, then `JSON.parse` turns the string into new objects with the same structure. You get the same output because they are copies. There is no way to tell them apart (except that they have different addresses in memory, i.e. by using ===) — Tibrogargan, Oct 13 '16 at 06:57
Possible duplicate of [How to create and clone a JSON object?](http://stackoverflow.com/questions/4120475/how-to-create-and-clone-a-json-object) — Tibrogargan, Oct 13 '16 at 07:01

Cerbrus · Accepted Answer · 2016-10-13T07:22:27.817

0

Why should it make a difference if you JSON.parse(JSON.stringify()) the result from obj.slice(1, 3), or not? That's what's happening in example 1.

You get obj.slice(1, 3), and you get the same value, passed through a stringify / parse.

Functionally, that's similar to:

var foo = 'bar';
console.log(foo);
console.log(JSON.parse(JSON.stringify(foo)));

Regarding question 2:

Yeap.

obj.slice alone can't be used to clone objects. It just copies the contents of an array. In this case, those contents are just pointers to existing objects:

var a = [{foo: 'bar'}, {x: 'y'}];
var b = a.slice(0,1) 

console.log('B:', b);

b[0].foo = 'test';

console.log('After modification:');
console.log('A:', a);
console.log('B:', b);

As you can see, editing the foo on b also changes it on a, because both arrays contain pointers to the same object.

That's why you need the JSON.parse(JSON.stringify()).

edited Oct 13 '16 at 07:22

answered Oct 13 '16 at 06:52

Cerbrus

70,800
18
132
147

So what would be the best way to clone a sub-array of objects? – vjjj Oct 13 '16 at 07:01
But JSON.parse(JSON.stringify(obj)) would clone the whole array. What if I wanted to clone only obj[0], obj[1], obj[2] into a new array? – vjjj Oct 13 '16 at 07:04
Then you first select the proper array entries with `slice` – Cerbrus Oct 13 '16 at 07:15
Then, I guess `JSON.parse(JSON.stringify(obj.slice(0, 3)))` is the right way to deep clone a sub-array? – vjjj Oct 13 '16 at 07:17
In that case, you should not have written `No` as answer to Question 2 (in your answer) – vjjj Oct 13 '16 at 07:20

score -1 · Answer 2 · edited May 23 '17 at 12:16

-1

Array.slice() does not do deep copying, hence its not suitable for multidimensional arrays.

jQuery's extend method does perform a deep copy when a true value is passed as the initial argument.

// Deep copy
var newArray = jQuery.extend(true, [], oldArray);

Clone "sub-array" of an array of objects (where objects are deeply nested)

2 Answers2