Question

I am confused the following loop causing an infinite loop in IE8

for (var i in theArray) {
            this.theArray.push(theArray[i]);
}

IE8 get caught in an infinite loop which I don’t understand why because this.theArray is a global array while theArray is a local variable.

If I had something like the following I would understand that an infinite loop would occurs:

for (var i in theArray) {
            theArray.push(theArray[i]);
}

This only happens in IE8. Does IE8 treat variables and scoping differently?

EDIT

Here is what I have within an object

this.theArray = new Array();

this.selection = function(theArray) {
    for (var i in theArray) {
        this.theArray.push(theArray[i]);
    }
}

EDIT

I found out that I am pass the global variable into the function as an argument. Duh! Why does this not work in IE8?

Answer 1

First of all, never use for in loop on an array. It will iterate through the values as well as augmented properties.

Then, this cannot be determined in your code. this might refer to the global object. Also, you might have missed using var in the local variable, thus making theArray point to the same global theArray you are appending to.

var theArray = [1,2,3];

function foo(){
    theArray = [4,5,6]; //missing var, theArray is the global theArray
    for (var i in theArray) {
        //you are pushing to the same array you are fetching from
        this.theArray.push(theArray[i]);

        //[4,5,6,4,5,6,4,5,6,.....]
    }
}