2

According to the way to add indexOf method to Array class in IE6, how do I now reject this method from iterating through any random array? For example:

Array.prototype.indexOf = function(needle) { ... };

var array = [1, 2, 3];
for (var i in array) {
    document.write(i + ': ' + array[i]);
}

gives output

0: 1
1: 2
2: 3
indexOf: function ...

How can I skip indexOf property and stop iterating on it without adding any code to where

for(...)

is called?

Community
  • 1
  • 1
rishat
  • 8,206
  • 4
  • 44
  • 69
  • To be honest, I'd avoid doing this anyway. JQuery provides an `inArray()` method which is just as good and doesn't involve messing with your core object prototypes. Other libraries also have similar tools. The only reason you'd need to be rolling your own solution is if you're not using any libraries, but if you're trying to support IE6 without jQuery or anything similar, you're a braver man than me. – Spudley Jun 23 '12 at 21:59

3 Answers3

6

This is a well known issue with Javascript's for..in loops.

You may think you're just looping through the elements of an array or an object that you've added directly, but it will also loop through any methods in the prototype as well. This can have unexpected consequences.

There are two ways around it:

Firstly, for arrays, don't use for..in. Use a simple for() loop instead -- ie:

for(var counter=0; counter<myArray.length; counter++) {...}

This form is recommended for arrays, because it is guaranteed to only iterate through the numeric array elements.

It doesn't work for generic objects, of course, since they don't have a length property nor numeric elements. For these, you still need to use for..in, but you should also always include an if() statement inside a for..in loop to filter out unwanted elements.

The format of this should look like this:

for (name in obj) {
    if (obj.hasOwnProperty(name)) {
        ...
    }
}

This looks ugly, but because of the problems of not doing it, it is recommended best-practice for Javascript, to the point that JS code quality cheking tools such as JSLint and JSHint will flag it up as a problem if you don't write your for..in loops like this.

You can read more about this problem here: http://yuiblog.com/blog/2006/09/26/for-in-intrigue/

Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Worked for me, for objects it returns `true`, and `false` in case of item is function. Thank you! – rishat Jun 28 '12 at 06:33
2

By using the correct for(...) loop for an array.

for (var i = 0, length = array.length; i < length; i++) {
    console.log(i + ": " + array[i]);
}

The form you are using is for iterating over the members of an object and its prototype-chain.

for
for...in

Andreas
  • 21,535
  • 7
  • 47
  • 56
  • Actually, it didn't work so I had to make it this way: `for (var i = 0; i < events.length && typeof events[i] == 'object'; i++) { }` to prevent `events[i]` be a 'function' for some `i` after I added an `indexOf` method to `Array.prototype`. IE6 is amazing. – rishat Jun 28 '12 at 06:31
0

Alternatively, you can add a line at the beginning of the loop body, like this:

for(var i in myArray) {
    if(typeof(myArray[i])=="function") continue;
    ...
    ...
    ...
}

This one doesn't increase indent and is easier to copy-paste into each loop in the source (if you're using for..in a lot and don't want to make a mess), and as long as you don't intentionally store functions in your array, you're good to go.

dkellner
  • 8,726
  • 2
  • 49
  • 47