Why does the function name appears in for loop while defining a function for Javascript prototype?

Question

I'm relatively new to Javascript and all of its infinite greatness. I wanted to practice defining my own functions for object prototypes, so I practiced writing a contains() function for Array:

if (!Array.prototype.contains){
    Array.prototype.contains = function(target){
        for (var i in this){
            console.log(i);
            if (this[i] == target) return true;
        }
        return false;
    }
}

Essentially, contains() iterates through each element inside this to look for the target. However, I'm noticing that console.log(i) returns the index number (ie. 0, 1, 2, etc.) as expected depending on the number of elements inside the array. However, it also always prints out contains! Here's the output from my console.log with only one element in the array:

0
contains

However, if I change the way I iterate the for loop, I don't get the contains output:

if (!Array.prototype.contains){
    Array.prototype.contains = function(target){
        for (var i = 0; i < this.length; i++){
            console.log(i);
            if (this[i] == target) return true;
        }
        return false;
    }
}

Output:

0

Now I've read through this StackOverflow post explaining the dangers of using for... in with array iteration, but I'm at a loss to explain programmatically why contains is appear in my first code snippet. If I console.log(this) on my Firefox developer console, I receive as expected, an Array object:

Array [ "scrubBackButton2", "scrubNextButton1" ]

Is the last element of an array object always the name of the function being called with?

I'm learning JS mostly through trial and error, so please definitely do refer me to a good piece of documentation or prior SO post if I've somehow missed a good answer to this!

Answer 1

A for ... in loop will go through every one of the object's enumerable properties. So it will go through the ['1'] property, and the ['2'] property, etc. Among the properties that the array has is a function named ['contains']. Why does it have that? Because you put it there! :)

Or more accurately, you put it on its prototype. But that's pretty much the same as far as for ... in is concerned. It will loop through all the enumerable properties on the object, and also the enumerable properties it inherits from its prototype, and from its prototype's prototype, etc. There are plenty of properties on Array.prototype, but they're not enumerable (which is why it's not also logging out 'push', 'pop', 'map', etc). The one you put there is enumerable, because that's the default nature of properties.

As you pointed out, for ... in is not appropriate for traversing an array, so i would recommend changing the code to do something else. Could be a manual for loop, or this.forEach, or a for ... of for example.

Below this line are some other options, but they get a bit into the weeds with code that you'll rarely ever write (but then again, modifying Array.prototype is something you'll rarely ever do).

========

If you wanted to keep the for ... in loop, one option would be to explicitly check to make sure that each property you're looking at is from the object itself, not from its prototype. To do that, you can use hasOwnProperty. If the property came from the prototype, hasOwnProperty will return false. If the property is of this specific object, it returns true;

if (!Array.prototype.contains){
    Array.prototype.contains = function(target){
        for (var i in this){
            if (!this.hasOwnProperty(i)) continue;
            console.log(i);
            if (this[i] == target) return true;
        }
        return false;
    }
}

[1, 2].contains(5)

Another possibility would be to make it so that contains isn't enumerable. By doing that, the for ... in loop would skip over it (and so would Object.keys())

if (!Array.prototype.contains){
    function contains(target){
        for (var i in this){
            console.log(i);
            if (this[i] == target) return true;
        }
        return false;
    }

    Object.defineProperty(Array.prototype, 'contains', {
        enumerable: false,
        configurable: false,
        writeable: false,
        value: contains
    });
}

[1, 2].contains(5);

For more information on defining properties, see this page: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty