Javascript for...in statement gives error when looping through array

Question

I just tried the for...in statement in Javascript.

This gives no error:

var images = document.getElementsByTagName('img');

for(x in images){
    document.write(images[x]) + " ");
}

However, this does what it should but gives an error in the FF error console.

for(x in images){
    images[x].style.visibility="visible";
}

This made me VERY curious as to what's going on.

Doing this:

for(x in images){
    document.write(x);
}

...gave me this:

01234567891011121314151617lengthitemnamedItem

What's there at the end? I assume this makes the document.images / document.getElementsByTagName('img') array not suitable to use with the for...in statement since the values for x at the end won't correspond to an image? Maybe a for loop is better?

Answer 1

Don't iterate through arrays with for ... in loops. Use an index:

for (var i = 0; i < arr.length; ++i) {
  // images[i] ...
}

The for ... in construct isn't wrong, it's just not what you want to do; it's for when you want to iterate through all properties of an object. Arrays are objects, and there are other properties besides the semantically-interesting indexed elements.

(Actually what comes back from getElementsByTagName isn't really an Array; it's a node list. You can however treat it like an array and it'll generally work OK. The same basic caveat applies for for ... in in any case.)

Answer 2

for..in does not loop through the indexes of an array, it loops through the enumerable property names of an object. It happens that the only enumerable properties array instances have, by default, are array indexes, and so it mostly works to think it does array indexes in limited situations. But that's not what for..in does, and misunderstanding this will bite you. :-) It breaks as soon as you add any further properties to the array (a perfectly valid thing to do) or any library you're using decides to extend the array prototype (also a valid thing to do).

In any case, what you get back from document.getElementsByTagName isn't an array. It's a NodeList. Your best bet for iterating through NodeLists is to use an explicit index a'la Pointy's answer -- e.g., a straight counting loop:

var i;
for (i = 0; i < list.length; ++i) {
    // ... do your thing ...
}

Somewhat off-topic because it doesn't relate to your NodeList, but: When you are actually working with a real array, because arrays in JavaScript are sparse, there is applicability for for..in, you just have to be clear about what you're doing (looping through property names, not indexes). You might want to loop only as many times as the array has actual entries, rather than looping through all the indexes in the gaps in the sparse array. Here's how you do that:

var a, name;
a = [];
a[0] = "zero";
a[10000] = "ten thousand";
for (name in a) {
    // Only process this property name if it's a property of the
    // instance itself (not its prototype), and if the name survives
    // transition to and from a string unchanged -- e.g., it's numeric
    if (a.hasOwnProperty(name) && parseInt(name) == name) {
        alert(a[name]);
    }
}

The above only alerts twice, "zero" and "ten thousand"; whereas a straight counting loop without the checks would alert 10,001 times (mostly saying "undefined" because it's looping through the gap).

Answer 3

The problem with the for ... in construct is that everything from the prototype(s) gets included in the enumeration.

What your output is showing is basically every attribute of images, which is an array object. So you get all the elements in your array (the numbers that appear in your output). The problem is that the functions available on your array are also included, which is why you see length in your output for example. And this is where your code barfs, since a functions does not have a style attribute

So, yes, as Pointy shows, you need to use a for loop to iterate over the elements of an array