Can someone explain to me how the for-in loop is called 3 times here?

Question

Here's the code:

var InvertedPeninsula = function() {
  this.inhabitants = [
    {
      name: 'Sir Charles',
      race: 'Human'
    },
    {
      name: 'Ealei',
      race: 'Elf'
    }
  ];
  // Adds an extra humans method property to the inhabitants array to return all Humans
  this.inhabitants.humans = function() { /* returns all Human inhabitants */ };
};

// Create a new invertedPeninsula
var invertedPeninsula = new InvertedPeninsula();

// Log the name of each invertedPeninsula inhabitant
for (var i in invertedPeninsula.inhabitants) {
  console.log(invertedPeninsula.inhabitants[i].name);
}

To me, it looks like it's called 2x. Where does the 3x come from? There are only 2 cells in the array.

See [Why is using “for…in” with array iteration such a bad idea?](http://stackoverflow.com/q/500504/1048572) (not sure whether duplicate) — Bergi, Aug 28 '15 at 15:18

Amit Joki · Answer 1 · 2015-08-28T15:23:16.940

This is exactly the pitfall one comes across when they use for...in to iterate an array. A for...in iterates through all the enumerable properties, and hence humans is being iterated too.

There are of course 2 objects in the array but for sure has three properties: 0, 1, humans and hence 3 times.

invertedPeninsula.inhabitants.forEach(function(habitat){
   console.log(habitat.name);
});

Array.forEach is your best bet as it iterates over numbered properties. A normal for loop would also do.

score 1 · Answer 2 · answered Aug 28 '15 at 15:16

Your array has the following values: 0, 1, 'humans' infact you added the element with the name 'humans' with the following code:

this.inhabitants.humans = function() { /* returns all Human inhabitants */ };

To check it try this code:

var InvertedPeninsula = function() {
  this.inhabitants = [
    {
      name: 'Sir Charles',
      race: 'Human'
    },
    {
      name: 'Ealei',
      race: 'Elf'
    }
  ];
  // Adds an extra humans method property to the inhabitants array to return all Humans
  this.inhabitants.humans = function() { /* returns all Human inhabitants */ };
};

// Create a new invertedPeninsula
var invertedPeninsula = new InvertedPeninsula();

// Log the name of each invertedPeninsula inhabitant
for (var i in invertedPeninsula.inhabitants) {
  console.log(i);   // CHANGED LINE
}

Oriol · Answer 3 · 2015-08-28T15:19:00.017

for...in iterates all (inherited and own) enumerable properties.

When you create a property using an assignment, it is defined as enumerable. You can make it non-enumerable (and thus not iterated by for...in) using

Object.defineProperty(this.inhabitants, 'humans', {enumerable: false});

var InvertedPeninsula = function() {
  this.inhabitants = [
    {
      name: 'Sir Charles',
      race: 'Human'
    },
    {
      name: 'Ealei',
      race: 'Elf'
    }
  ];
  // Adds an extra humans method property to the inhabitants array to return all Humans
  this.inhabitants.humans = function() { /* returns all Human inhabitants */ };
  Object.defineProperty(this.inhabitants, 'humans', {enumerable: false});
};

// Create a new invertedPeninsula
var invertedPeninsula = new InvertedPeninsula();

// Log the name of each invertedPeninsula inhabitant
for (var i in invertedPeninsula.inhabitants) {
  console.log(invertedPeninsula.inhabitants[i].name);
}

Rather: If you want to iterate the inhabitants, use the proper loop. — Bergi, Aug 28 '15 at 15:18

Can someone explain to me how the for-in loop is called 3 times here?

3 Answers3