for-in iteration in Javascript

Question

To the code:

<!DOCTYPE html>
<html>
<body>
<p>This.........</p>
<p>That.....</p>
<p>And yet .....</p>
<script>
x=document.getElementsByTagName("p");
for (i in x)  
    document.write("..."+x[i].innerHTML+" "+i+"<br>");
document.write(x.length);
</script>
</body>
</html>

i'm getting the output

This.........

That.....

And yet .....
...This......... 0
...That..... 1
...And yet ..... 2
...undefined item
...undefined namedItem
...undefined iterator
...undefined length
3

rather than the following which is what i expect:

This.........

That.....

And yet .....
...This......... 0
...That..... 1
...And yet ..... 2
3

the for-in statement is supposed to iterate on x as many times as the length of x-- which is 3 as the code itself is saying-- and terminate. what it seems to be doing instead is iterating on all the children of the node-- not just the paragraph tags returned by document.getElementsByTagName("p").

this is either some subtlety i'm missing in the code, or a mistake in the JavaScript engine.

What's missing here?

Short answer: do not use for..in for iterating arrays or sequences. for..in iterates properties (which includes array indexes, but also other properties like item and iterator). — user2864740
– user2864740, Commented Oct 30, 2013 at 23:27
"or a mistake in the JavaScript engine" --- it's 99.9999% chance that every error you experience in next year of your career is your mistake, not ECMAScript implementation's — zerkms
– zerkms, Commented Oct 30, 2013 at 23:27
the for-in statement is supposed to iterate on x as many times as the length of x - Wrong. That is not what the for ... in statement means at all. It iterates over the keys of x. — Chris Hayes
– Chris Hayes, Commented Oct 30, 2013 at 23:28
@ashley it's part of the core language, but it doesn't do what you think it does :) — Pointy
– Pointy, Commented Oct 30, 2013 at 23:33

Pointy · Accepted Answer · 2013-10-30 23:52:23Z

7

Don't use for ... in for arrays and array-like things like NodeList objects. Always use a numeric index.

The for ... in construct is for iterating through the enumerable properties of an object. Strictly speaking, it doesn't even guarantee that the numeric properties will be traversed in numeric order! Use a numeric index, or else convert array-like objects to real arrays and use .forEach() (in newer browsers):

var x = document.getElementsByTagName("p");
[].slice.call(x, 0).forEach(function(value, index) {
  document.write("..." + value.innerHTML + " " + index + "<br>");
});

edit — RobG points out correctly that the .slice() trick won't work in IE versions before IE9. It's easy enough to do the same thing with a simple for loop with a numeric index, so if you're worried about IE8 or below, just do that:

var x = document.getElementsByTagName("p");
for (var i = 0; i < x.length; ++i) {
  // whatever with x[i]
}

Really old versions of Mozilla, I think, didn't even support using array indexing with Node objects; you had to use the .item( i ) method. I don't think that's a serious concern for realistic new code however.

edited Oct 30, 2013 at 23:52

answered Oct 30, 2013 at 23:27

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Pointy Over a year ago

@RobG ha ha yes thanks, I just fixed that. I don't think using "slice" on a NodeList has any bad repercussions; the MDN documentation includes similar suggestions in examples.

RobG Over a year ago

MDN is a community wiki for Mozilla browsers, I'm sure at least some of the authors are happy to publish code that will fail in IE. ;-)

Pointy Over a year ago

@RobG well IE9+ can do it. I'm starting to live in the fantasy dream world of not worrying about Windows XP anymore.

RobG Over a year ago

—yes, IE9 finally starts to behave like a real browser but unfortunately (depending on whose stats you believe) IE8 is still used by about 12% to 15% of web users.

Qantas 94 Heavy Over a year ago

@Pointy: personally, I'll stop supporting IE8 when XP extended support ends - the vast majority of the IE8 users are on XP, and end users really should know better.

|

Asenar · Accepted Answer · 2013-10-30 23:34:09Z

1

var x=document.getElementsByTagName("p");
for(var i=0;i<x.length;i++)
{
  document.write("..."+x[i].innerHTML+" "+i+"<br>");
}

edited Oct 30, 2013 at 23:34

answered Oct 30, 2013 at 23:27

Asenar

7,0863 gold badges44 silver badges53 bronze badges

1 Comment

Asenar Over a year ago

yes, so the ; after i++ made an error, sorry. just edited.

Collectives™ on Stack Overflow

for-in iteration in Javascript

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related