Problems with JavaScript "for in" loop

Question

I have an array of objects which will be the basis for a certain menu in my website. It will be build using JavaScript:

[
  {"menuName":"Contact Info","sectionName":"contacts"},
  {"menuName":"Facilities","sectionName":"facilities"},
  {"menuName":"Locations","sectionName":"locations"},
  {"menuName":"Packages","sectionName":"packages"},
  {"menuName":"Policies","sectionName":"policies"},
  {"menuName":"Reviews","sectionName":"reviews"},
  {"menuName":"Rooms","sectionName":"rooms"}
]

So I decided to use the "for in loop" so that I won't have to deal with indexes and lengths. I expect seven items to appear in the menu when it gets built (I'll be using <ul> and <li>).

When I was debugging and accidentally added a background color to the <li>, is when all hell broke loose. I found at least 30 empty <li> after the visible 7th menu <li>.

Why is this happening?

EDIT:

Here's the loop. The loop creates another object for another function to parse later on. (It creates an <li> with an <a> inside with properties provided by the previous array.) I know that the other function works fine because when I change this "for-in" loop to an ordinary for loop, or while loop, it works fine.

this.sectionList = function(menu, id) {
    var list = new Array();

    for(var i in menu) {
        var listItem = {
            "element" : "li",
            "contains" : [{
                "element" : "a",
                "attr" : {
                    "href" : menu[i].sectionName + ':' + id
                },
                "contains" : menu[i].menuName
            }]
        }
        list.push(listItem);
    }
}

who knows? could you show what you are doing with the code you have. — Tomas Jansson, Aug 07 '11 at 17:48
My ESP isn't working today. Please actually explain your issue. There is no `
`for in loops` are for iterating over object members, [not for](http://stackoverflow.com/questions/500504/javascript-for-in-with-arrays) iterating over an array. Is the `.length` property ***really*** that much to deal with? — Matt, Aug 07 '11 at 17:55
@Matt: i used to do foreach loops in PHP which were much faster to write than for and while. also, you won't have to deal with conflicting variables, counters, indexes using the foreach. i thought JS would be the same, until this happened. — Joseph, Aug 07 '11 at 18:01

score 11 · Accepted Answer · answered Aug 07 '11 at 17:56

11

for in iterates over object properties. Javascript arrays are just a specific kind of object with some handy properties to help you treat them as just arrays, but they still have internal object properties .. and you don't mean to iterate over these).

So, you shouldn't use for in to iterate over arrays. This only became evident to you when you added your background colour, but it'll always be the case.

Instead, loop with a counter and array .length.

answered Aug 07 '11 at 17:56

Lightness Races in Orbit

378,754
76
643
1,055

What about sparse arrays? `var arr = []; arr[1236345566] = 10; arr[2745453222] = 30; var sum = 0; for (var i = 0, len = arr.length; i < len; ++i) { sum += Number(arr[i]); }` would be rather slow. This is a contrived example, but there are plenty of cases where you might need to do real work on all the members of a sparse array. – kpozin Mar 20 '12 at 23:12
@kpozin: It would, but that's only because this is not what `Array` is for. – Lightness Races in Orbit Mar 20 '12 at 23:33

score 2 · Answer 2 · answered Aug 07 '11 at 17:51

2

Your object gets methods and properties passed by JavaScript itself. Those are methods that every object gets when its created.

You have to use .hasOwnProperty to find only the properties and methods you assigned to the object!

for(var i in myObject){
  if(myObject.hasOwnProperty(i)){
    console.log(myObject.i);
  }
}

Hope that helps!

Here are two articles that helped me two understand it better:

http://bonsaiden.github.com/JavaScript-Garden/#object.hasownproperty http://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/

answered Aug 07 '11 at 17:51

js-coder

8,134
9
42
59

Don't do this. Loop properly instead. – Lightness Races in Orbit Aug 07 '11 at 17:55
This is not how to loop over arrays. – Lightness Races in Orbit Aug 07 '11 at 17:57
Yeah. But it's how to loop over objects isn't it? I thought he had two loops, one for the array itself and one for the objects inside of it. – js-coder Aug 07 '11 at 17:59
@dotweb: i suppose you have answered my question (even without the additional info). i never knew the for-in would also run through the prototype of the object. – Joseph Aug 07 '11 at 18:06
@dotweb: Yes, but he's looping over the array. And begging for accepts when there is some controversy over the answer seems a little raw... – Lightness Races in Orbit Aug 07 '11 at 19:00
I never said he should loop with the `for in` through an array. Look at my answer, it says object, not array. – js-coder Aug 07 '11 at 20:36
@dotweb: The input object in this question _is an array_. – Lightness Races in Orbit Aug 11 '11 at 09:21

jfriend00 · Answer 3 · 2011-08-07T18:11:08.177

I see no difference between the two ways of iterating your data structure in this jsFiddle: http://jsfiddle.net/jfriend00/HqLdk/.

There are lots of good reasons why you should not use for (x in array) on arrays. The main reason is that that type of iteration iterates over the properties of the object, not just the array elements. Those properties can include other properties of the array if any have been added where as the for (var i = 0; i < array.length; i++) method will never have issues with added properties because by definition, it only iterates over the array elements.

It is somewhat luck that when no additional properties have been added to the array object, that iterating over the properties happens to include just the array elements. The language does not want you to iterate array elements that way. You should iterate arrays with

for (var i = 0; i < array.length; i++).

I understand the seduction of the simpler syntax, but it is not the right way to do it.

Problems with JavaScript "for in" loop

3 Answers3

Linked

Related