For Pitfall in Javascript

There are plenty of fun and quirky features in Javascript. Beginners typically have trouble with the for in statement. In most other programming languages, a for in statement lets you loop through each of the items in an array or list. Javascript won’t yell at you if you try to use for in on an array, but the result will be really weird. In javascript, for in is meant to loop through each of the properties of an object. Let’s look at a bad example, followed by a good one.

Bad

var arr = [1,2,3,4,5];
var sum = 0;

for (item in arr) { sum += item; }

console.log(sum); // "001234" // WTF?!

I won’t go into the details of why this is bad, just don’t use for in with arrays. You should be using forEach or a simple for loop instead.

Good

var jon = {
  name: 'Jon',
  age: 25
};

for (item in jon) {
  console.log(item + ' ' + jon[item]);
}   // name Jon
    // age 25

Prototype Pollution Problem

Even if you use for in correctly, you can still sometimes get unexpected results. It happens when you make changes to the prototype of an object. Let’s look at another example:

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function() {
  return this.name;
};

var jon = new Person('Jon');

console.log(jon.getName()); // "Jon"

for (item in jon) {
  console.log(item + ' ' + jon[item]);
}   // name Jon
    // getName function .... // WTF?!

The latest version of javascript allows you to specify if you want a prototype method to be enumerable. I won’t go into the details of that. Rather, here is a good way to exclude prototype methods:

for (item in jon) {
  if (jon.hasOwnProperty(item))
    console.log(item + ' ' + jon[item]);
}   // name Jon