Copies of nested arrays and references in javascript

Question

The following javascript code [jsfiddle]:

Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from < 0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

var masterlist = [{
    name: "Master1"},
{
    name: "Master2"}];
var parentlist = [{
    name: "Parent1"},
{
    name: "Parent2"}];
var childlist = [{
    name: "Child1"},
{
    name: "Child2"}];

for (var i = 0; i < masterlist.length; i++) {
    var master = masterlist[i];
    master.parents = parentlist.slice();
    for (var j = 0; j < master.parents.length; j++) {
        var parent = master.parents[j];
        parent.children = childlist.slice();
    }
}

console.log("before removing")
console.log("master1 parents: " + masterlist[0].parents.length);
console.log("master2 parents: " + masterlist[1].parents.length);
console.log("master1 parent 1 childrens: " + masterlist[0].parents[0].children.length);
console.log("master2 parent 2 childrens: " + masterlist[1].parents[1].children.length);

masterlist[0].parents.remove(0);
masterlist[0].parents[0].children.remove(0);

console.log("after removing")
console.log("master1 parents: " + masterlist[0].parents.length);
console.log("master2 parents: " + masterlist[1].parents.length);
console.log("master1 parent 1 childrens: " + masterlist[0].parents[0].children.length);
console.log("master2 parent 2 childrens: " + masterlist[1].parents[1].children.length);?

results in:

before removing
master1 parents: 2
master2 parents: 2
master1 parent 1 childrens: 2
master2 parent 2 childrens: 2
after removing
master1 parents: 1
master2 parents: 2
master1 parent 1 childrens: 1
master2 parent 2 childrens: 1

I would expect (and need) this:

before removing
master1 parents: 2
master2 parents: 2
master1 parent 1 childrens: 2
master2 parent 2 childrens: 2
after removing
master1 parents: 1
master2 parents: 2
master1 parent 1 childrens: 1
master2 parent 2 childrens: 2 <-- difference

What am I doing wrong? It looks like the childs are referring to the same array also I did slice the initial children array (which did work with the parent array as expected).

Why don't you use .splice() to remove elements from an existing array? — jfriend00
– jfriend00, Commented Apr 14, 2012 at 13:05
That wouldn't fix the original problem. Consider masterlist[0].parents[0].children.push({name: "child3"}); Both are updated again. — Alexander Zeitler
– Alexander Zeitler, Commented Apr 14, 2012 at 13:46
It would be good to know what are you trying to do overall with this script. Jus pasting the code & expected output can't help us reading the code — Tamil
– Tamil, Commented Apr 14, 2012 at 17:13
its simplified from a knockoutjs viewmodel with nested elements who's elements need to be added / removed from arrays indepentendly but being initialised from the same array of data. — Alexander Zeitler
– Alexander Zeitler, Commented Apr 14, 2012 at 17:40

Golo Roden · Accepted Answer · 2012-04-14 22:48:22Z

3

Having a look at http://de.selfhtml.org/javascript/objekte/array.htm#slice could deliver a potential answer (translation done by me):

"Please note: If there is an object contained within the array, the newly created array contains a reference to that object. That means: If the object is changed, so does the array that was created using slice(). If numbers and strings are contained, they are copied."

Should explain why both change, shouldn't it?

answered Apr 14, 2012 at 22:48

Golo Roden

152k102 gold badges319 silver badges445 bronze badges

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

Collectives™ on Stack Overflow

Copies of nested arrays and references in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related