two ways of looping through a JavaScript array of elements with different outcomes

Question

I have a question about looping in JavaScript. Mostly I use jQuery but now I've decided to make an easy game in pure JavaScript.

if I loop through all my 'td' with this method it works, The cells[i] are td elements and I can attach events to them.

    for(i = 0; i < cells.length; i++){
        if(cells[i].nodeName == 'TD')
        {
            cells[i].onclick = function(){
                // call funciton on onclick
            };
        }
    }

But if I do like this, each element are just index numbers and the two at the end are length and item.

    for(var cell in cells){
        // cell is a number
    }

What's the difference and why doesn't the foreach-loop work like I want it to?

alexg · Accepted Answer · 2012-12-16 11:24:43Z

1

cell is a number because it is an index to the cells HTMLCollection. In the second loop you'd use the values like so:

for(var cell in cells){
    if(cells[cell].nodeName == 'TD')
    {
        cells[cell].onclick = function(){
            GameTurnExecute(player);
        };
    }
}

answered Dec 16, 2012 at 11:24

alexg

3,0743 gold badges25 silver badges37 bronze badges

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

1 Comment

Rob W Over a year ago

cells is not an Array, but a HTMLCollection or NodeList.

neo · Accepted Answer · 2012-12-16 12:13:34Z

0

You can also say:

for(var cell in cells){
    if(cells.hasOwnProperty(cell))
    {
        cells[cell].onclick = function(){
            GameTurnExecute(player);
        };
    }
}

not to see properties comming from prototype chain. (https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/hasOwnProperty)

In fact, almost everty time you use for in in javascript you want to use hasOwnProperty.

answered Dec 16, 2012 at 12:13

neo

8117 silver badges7 bronze badges

1 Comment

RobG Over a year ago

You are assuming that host object have prototype inheritance, which is not reasonable. They are not required to implement any inheritance pattern at all, and in at least one popular host environment, they don't.

Collectives™ on Stack Overflow

two ways of looping through a JavaScript array of elements with different outcomes

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related