Difference in behavior between for and for.. in

Question

I have the following code that works exactly as expected (which is to go through the array, showing ONLY each element, in this case "Miguel" and "Celeste"):

var runners = ['Miguel', 'Celeste'];
Array.prototype.winner = function() {
  for (var i = 0; i < this.length; i++) {
    console.log(runners[i]);
  }
}
runners.winner();

My question is why not this one? Why does it always make that last loop and print the function itself? Is there any implicit property that does not enter for the count (this.length)? If yes, then there’s no way to do this with for(var i in this) { right?

var runners = ['Miguel', 'Celeste'];
Array.prototype.winner = function() {
    for(var i in this) {
    	console.log(runners[i]);
    }
}
runners.winner();

Answer 1

The problem here is that the for...in is a method for Objects, and fetch enumerable properties and as defined in prototype. Once you are using an object method in an array, the function is also passed as an object property. However is not a property of the instance but of its prototype, then it is possible to filter these "not proper" properties with the .hasOwnProperty.

Look here:

var runners = ['Miguel', 'Celeste'];
Array.prototype.winner = function() {
    for(var i in this) {
		console.log(i, this.hasOwnProperty(i));
    }
}

runners.winner();

However, the for ... in is not an arrays method, but there is a recent one that is. Using the for ... of everything is fine, assuming that the browser is modern:

var runners = ['Miguel', 'Celeste'];
Array.prototype.winner = function() {
  for (var nome of this) {
    console.log(nome);
  }
}
runners.winner();

Answer 2

The third index of yours array is the very winner, that is, there is the index 0, the 1 and the winner (which is also an index).

And as @Maniero said, for in varre, in addition to the contents you created, the prototypes of the object.

Answer 3

The first, one for traditional, sweeps the array. It accesses only the elements of the type object Array, but not their properties. It is similar to the new for...of.

Already the for...in scans all properties of the object, not only its elements (so almost always not what you want, at least for array).

Has a question with more detailed information on the for.

Note that both are sweeping the this which refers to the object itself. But what object are we talking about in this loose code? It is the global GIFT of the script. So all the symbols of script are contained in this implicitly created global object. Therefore the function is part of that object.

Question with explanation about the this.