Javascript prototype extension weird behaviour

Question

Can you explain me this?

JAVASCRIPT

if (typeof Array.prototype.contains != 'function') {
    Array.prototype.contains = function (str){
        return this.indexOf(str) > -1;
    };
}

var text = "Hello world";
var tokens = text.split(" ");
console.log(tokens.length);
for (var i in tokens){
    console.log(tokens[i]);
}

OUTPUT

2
"Hello"
"world"
function ()

In other words, the "contains" function i added to the Array prototype appears in the for loop as last element (but the array length is 2). Why?

Answer 1

Why?

Because for-in doesn't loop through array entries , it loops through enumerable properties of an object. You've created a new enumerable property on Array.prototype , and so that property shows up in for-in loops on any array.

The solutions are:

1. Don't do that , instead loop through arrays in any of several ways that don't have that problem , or

2. Use hasOwnProperty to filter out inherited properties (see link above for more), or

3. Define contains as a non-enumerable property via Object.defineProperty or similar (you can only do this on ES5+ engines, it cannot be shimmed).