Question

I have the following code in my web app’s main JavaScript:

    // uniq for arrays
if (!Array.prototype.getUnique) {
    Array.prototype.getUnique = function () {
        var u = {}, a = [];
        for (var i = 0, l = this.length; i < l; ++i) {
            if (u.hasOwnProperty(this[i])) {
                continue;
            }
            a.push(this[i]);
            u[this[i]] = 1;
        }
        return a;
    }
}

It’s a simple uniq clone for javascript, monkeypatched into the basic Array class. (Not here to debate monkeypatching, flame elsewhere please…)

getUnique() works as intended, but now whenever I iterate over an Array with a for...in loop, an additional index called getUnique is passed to the iterator body, and when this false n is looked up, getUnique‘s code is the value. (In other words: for...in is looping over the array as it should, but appending a getUnique as the last iteration)

What is going on here? There’s another function monkeypatched in right above this one that works fine (indexOf()) and does not appear in the iterator. Here is some example code that triggers this issue:

for (var r in result) {
    //tags = tags + result[r]["tags"].split(" ").join(", ")
    if (result[r]["tags"]) {
        var newtags = result[r]["tags"].split(" ");
        debug.log(newtags);
        for (var n in newtags) {
            debug.log("n is " + n);
            tags.push(newtags[n]);
        }
    }
}

The debug output from this snippet looks like:

[14:22:26.090] [["camp", "furnitur", "wood"]]
[14:22:26.093] ["n is 0"]
[14:22:26.096] ["n is 1"]
[14:22:26.099] ["n is 2"]
[14:22:26.101] ["n is getUnique"]

What is going on here? Refactoring the monkeypatch and dropping it in a utility class is easy enough, but this is a really strange edge case to me. I have some ideas in my head about what is happening here, but those are just guesses. Can anyone explain?

Answer 1

The common misconception is that the for…in operation is, in javascript, made to iterate Arrays. This is wrong. It’s usage is to iterate over any enumerable property of an object. In javascript, everything is an object (Arrays included). But you may notice, when you do for…in on an array, you don’t get values out like length, slice, etc. This is because those are NOT enumerable properties of the object.

This SO question has some really good information on the usage of for…in: Why is using "for…in" with array iteration a bad idea?

If you want to stick to using for…in, you can do like was suggested above and check for hasOwnProperty inside your for…in

for ( var v in myArray ) {
    if ( myArray.hasOwnProperty(v) ) {
        // Do Something
    } 
}

I, however, suggest using plain old boring loops…

for ( var i = 0; i <= myArray.length - 1; i++ ) {
    // Do Something
}

Without going into crazy detail, this works without hitting your added methods because the “indexes” of the array are not really indexes at all, but are instead properties with a name that matches their corresponding index: i.e 1, 0, 4, etc.

They feel like indexes because in javascript you can’t access a property with dot notation if that property is a number (i.e: myArray.0 will not work). So you do myArray[0], and that feels like an array.