Question

This has bothered me for a while, see my jsfiddle: http://jsfiddle.net/DHR8Q/, which contains the following javascript code:

var id = "11111;22222;33333";

id = id.split(";");

alert(typeof id);

for (var i in id){
    alert(id[i]);
}​

When I split the variable id by the character “;”, then I use the for loop, I would assume that i == 0,1,2 because the string id was split into 3 parts, but this is not what happens. In reality i == 0,1,2,3,4.... Why does JavaScript do this?

Answer 1

This is because for... in iterates over all properties of an object (including those from the prototype).

When you for... in over an array, you get the array elements, as well as the length property, and any properties of Array.prototype.

You can fix this by using hasOwnProperty:

for (var i in id){
    if(id.hasOwnProperty(i){
        alert(id[i]);
    }
}​

Though, I suggest not using for... in for arrays, use forEach:

id.forEach(function(v){
    alert(v);
});

Or a good ol’ for loop:

for(var i=0, len=id.length; i<len; i++){
    alert(id[i]);
}

---

EDIT

The forEach function is not available as a built-in on back-level browsers, so you can do this:

if (typeof Array.prototype.forEach !== 'function') {
    Array.prototype.forEach = function(fn, thisObj) {
        var scope = thisObj || window,  L = this.length, i;
        for (i=0; i < L; ++i) {
            fn.call(scope, this[i], i, this);
        }
    };
}