14

I read somewhere (sorry, I can't find the link) that the For...In loop is not recommended for arrays. It is said here: http://www.openjs.com/articles/for_loop.php that it is meant for associative arrays, and in http://www.w3schools.com/js/js_loop_for_in.asp that is for iterating through all the properties of an object (It does not say that it can be used on arrays). I do not know who to believe. I don't want this question to become a debate. I just want to know if I could use this in my code without unforeseen side effects. Thanks!

please delete me
  • 819
  • 2
  • 14
  • 29
John Bautista
  • 1,480
  • 3
  • 29
  • 60
  • 3
    W3Schools? [W3Fools](http://w3fools.com)! Although having said that anything which claims that Javascript has "associative arrays" is wrong too – Gareth Mar 11 '11 at 06:48
  • @Gareth Nice link, however, JavaScript *does* have ["associative arrays"](http://en.wikipedia.org/wiki/Associative_array). Perl even calls them as such although "dictionary" or "map" are common terms elsewhere. (I prefer avoiding the term "associative array" because I like to keep the distinction with a "normal array" ADT; however that does not make the term incorrect). –  Mar 11 '11 at 07:31
  • @pst Lots of people *treat* javascript objects as associative arrays, but they aren't exactly the same. It's pedantic, but the difference is that all object properties are strings. So for example, `array = {}; array[42] = 'foo'; array["42"] // => 'foo' (!)`. For numbers this isn't *that* crazy, but with objects (which I would expect to be able to use as keys in an "associative array") it just doesn't work: `var key1 = {name: 'Gareth'}, key2 = {}, array = {}; array[key1] = 'awesome'; array[key2] // => 'awesome' (!)` In this case, both "keys" have the same `.toString()` so set the same property – Gareth Mar 11 '11 at 08:30
  • @pst Note that one of the requirements from the first section of your linked Wikipedia page is that "an associative array's keys can also be arbitrarily typed" – Gareth Mar 11 '11 at 08:34

4 Answers4

21

An array is an object, and array elements are simply properties with the numeric index converted to string. For example, arr[123] refers to a property "123" in the array object arr.

The for ... in construct works on all objects, not just arrays, and that is cause for confusion.

When somebody for ... in an array, most often the programmer intends to iterate just all the elements, even most likely in order. For example, if the array holds a bunch of numbers, then the programmer most likely intends to iterate a stream of numbers. The semantics is so similar to array iteration in other programming languages that it is very easy to get confused.

In JavaScript, this construct does not iterate array elements in order. It iterates all the array's property names (including the names of inherited prototype functions, any properties added to it, any other non-element properties added to it etc.), and not in order at all. In earlier browsers, it will even find the property length, although in recent browsers these properties are now defined to be hidden for this exact reason -- people keep tripping on it!

With the array of integers above, you get not a stream of numbers, but a stream of text strings. And not the element values, but the names of the properties (which are just the numeric indices not in any order). This is most likely not what the programmer means, if he/she comes from another programming language. If the elements stored in the array happen to be similar numeric values, it confuses the hell out of everybody.

That's why you shouldn't do it. You shouldn't use a language construct that looks like it does obvious things, but actually does things that are completely different. It creates bugs that are very obscure and very difficult to find.

Stephen Chung
  • 14,497
  • 1
  • 35
  • 48
2

I've tested array iteration in several browsers (FireFox 3, Opera 9, IE6, IE9 beta, Chrome) and it works fine; I seem to recall some cross-browser incompatibility but I must be mistaken.

There is still a caveat though:

As you've mentioned, the for ... in syntax is used for iterating over the properties of an object; so, with an array, all the properties of that array object will also be iterated over along with the elements. Normally, the array object only has properties corresponding to the keys in it, but if another script modifies Array.prototype (e.g. some framework), then the added methods/attributes would unexpectedly show up in the iteration as well.

Cameron
  • 96,106
  • 25
  • 196
  • 225
  • can you give examples of these browsers? – John Bautista Mar 11 '11 at 06:41
  • @Jairo: I can't remember exactly which ones, but I distinctly remember having to fix all my code because I wanted it to be cross-browser compatible and it wasn't working on a browser I was testing it on (could be IE6?) – Cameron Mar 11 '11 at 06:46
  • IE6 is given :P. Hmmmm. Thanks for clarifying your answer. – John Bautista Mar 11 '11 at 06:54
  • 1
    @Jairo: I just tested a sample using `for ... in` on a bunch of browsers (including IE6) and it works fine, I must have had to change my JS for another reason (probably the prototype one) – Cameron Mar 11 '11 at 06:55
2

A couple of good reasons are given in the Prototype.js library documentation: http://www.prototypejs.org/api/array

Basically, using for...in to iterate an array is brittle since any other code can add properties to the Array prototype, which will then become enumerable properties on every array object.

Mark Bessey
  • 19,598
  • 4
  • 47
  • 69
0

Iterating over an array using for(... in ...) will not get you numeric keys, it gets you string values.

It will get you properties defined on the prototype, so if any code extends Array, e.g. by doing:

Array.prototype.each = ...;

then you will see the property each.

There is no gaurantee that you will get the properties in array index order. E.g. try iterating over

var arr = []
arr[1] = 1;
arr[0] = 0;

On a lot of browsers you will get 1 before 0.

And you are not guaranteed to get all indices. Try iterating over

[0,,,3]

you will not get the index 1 or 2.

Mike Samuel
  • 118,113
  • 30
  • 216
  • 245