For loop creating infinite object tree

Question

I have 2 for loops creating an object:

function newImage(){
    image = {};
    var temp = {}
    for(i=0;i!=250;i++){
        temp[i] = {};
    }
    image = temp;
    for(i=0;i!=250;i++){
        image[i] = temp;
    }
}

This should create an object with 250 values, each being an object that contains 250 objects. However, it creates an object that creates 250 values, fills those with 250 values, and loops this for a while. I haven't found the end of the tree, but it doesn't freeze leading me to believe that it is finite. I've checked the iterations up to 50 and it works all the way (it doesn't make the long tree). It seems as if it is happening during the last iterations. Here's the full thing.

Hm weird. It _should_ stop at `i = 250`. But maybe `i` is being changed elsewhere and it sneaks past 250? Often, just to be safe, people write the loop condition as `i < 250`. — ryanyuyu, Jul 08 '15 at 23:57
Oh, ok. I did do that but it was stopping early. But that's not the problem. It does that correctly but it does it _correctly infinitely._ — Fuzzyzilla, Jul 09 '15 at 00:03
well you have done wrong. You told the loop to add something in your loop infinite time excluding that object at 250th index — Sanmveg saini, Jul 09 '15 at 00:12
@Annisaini - the loop will terminate after 250 iterations. The issue is with a self-referencing object that gives the appearance of an infinite tree of objects (when there is actually only a single object). — MT0, Jul 09 '15 at 00:24

MT0 · Accepted Answer · 2015-07-09T00:22:14.183

var temp = {}
for(i=0;i!=250;i++){
    temp[i] = {};
}

The lines above create an object and populate it with 250 other objects (so far so good).

Then image = temp; sets the image (global) variable to be temp (so image now contains 250 objects) then:

for(i=0;i!=250;i++){
    image[i] = temp;
}

This replaces each of those 250 objects (overwriting the previous assignments) with a reference to the parent object so the object the has 250 attributes which all refer to itself.

Effectively what you wrote is:

image = {};
for ( var i = 0; i < 250; i++ )
    image[i] = image;

It then appears that you have an infinite tree of objects whereas you only have a single object which has many attributes that refer to itself so whenever you descend to a child you end up back at the parent (and expanding the object hierarchy in the browser makes it appear to be an infinite tree when its actually only showing the same object over and over).

What you probably meant to write is:

function newImage(){
    var temp = {};
    for( var i=0; i < 250; i++){
        temp[i] = {};
        for( var j=0; j<250; j++){
           temp[i][j] = {};
        }
    }
    return temp;
}

Excellent answer. @Fuzzyzilla, if you'd like to read a bit more about the issue, I wrote about it [here](http://stackoverflow.com/a/18843648/1202830). — Michael Geary, Jul 09 '15 at 00:33

score 0 · Answer 2 · answered Jul 09 '15 at 00:13

0

Your problem is that when you assign image to temp, any further edits on either of those objects is reflected on the other object.

Try the following code instead:

function newImage(){
    image = {};
    var temp = {}
    for(i=0;i!=250;i++){
        temp[i] = {};
    }
    for(var item in temp){
        image[item] = temp[item];
    }
    for(i=0;i!=250;i++){
        image[i] = temp;
    }
}

answered Jul 09 '15 at 00:13

AJ Uppal

136
6

If you change `image[x]` then you are also changing `image[y]` since they are the same object - which is probably not what the OP wanted. – MT0 Jul 09 '15 at 00:31

For loop creating infinite object tree

2 Answers2