CODEWITHSUNDEEP
javascriptfor-loopforeach
Spencer
Spencer

Reputation: 671

Strange behavior in Javascript enhanced for...in loop

I am making a Javascript game with the canvas tag, and I am using an enhanced for loop to update the player positions.

In brief:

var actors = new Array();

var player = new Actor(0, 0, img);

actors[0] = player;

function update_positions() {
    //position 1
    for(var a in actors) {
        //position2
        a.xpos += a.xvel;
        a.ypos += a.yvel;
    }
}

Just outside of the for loop at position 1, I can access the correct value of actors[0].xvel. Inside the for loop at position 2, a.xvel is undefined. Can someone explain to me what is happening?

Upvotes: 33

Views: 28677

Answers (5)

Eamonn O'Brien-Strain
Eamonn O'Brien-Strain

Reputation: 3412

Another option is to use the underscore library:

_.each( actors, function(a) {
    a.xpos += a.xvel;
    a.ypos += a.yvel;
});

or if you don't want to use underscore but are using JQuery anyway, then you can do:

$.each( actors, function(i, a) {
    a.xpos += a.xvel;
    a.ypos += a.yvel;
});

One nice feature of this functional pattern of iteration is that you can use var to declare variables in the loop that are scoped to the body of the loop, which helps avoid getting bitten by the odd variable scoping rules of JavaScript.

Upvotes: 0

Chris Fulstow
Chris Fulstow

Reputation: 41882

Try using actors[a].xpos instead of just a.xpos.

See here for more info on JavaScript for-in loops.

Upvotes: 2

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827426

The for...in statement is meant to be used to iterate over object properties, by looking your code seems that actors is an Array (you are setting the initial element with index 0).

This statement will also crawl up the prototype chain, if you have extended the Array.prototype those properties will be iterated, and also the order of iteration is not warranted.

I would recommend you to avoid problems and iterate using a normal for loop:

for (var i = 0; i < actors.length; i++) {
    actors[i].xpos += actor.xvel;
    actors[i].ypos += actor.yvel;
}

If I'm wrong, and actors is not an Array, I would recommend you to use the hasOwnProperty method, to ensure that the property exists in the object itself, not up somewhere in the prototype chain:

for (var name in object) {
  if (object.hasOwnProperty(name)) {
    //
  }
}

Upvotes: 90

harto
harto

Reputation: 90493

The for (x in y) construct iterates through the indexes of an array, not its members.

Upvotes: 2

am9u
am9u

Reputation: 119

it looks like you're trying to access object properties on the name, not the value here. the index, in this case '0', gets assigned to 'a' in the for/in loop.

what you want to do is access the value of the array member, ie: actors[a].

try this:

for(var a in actors) { // a=0 the first time around the loop,  
    actor = actors[a]; // same thing as actors[0];
    actor.xpos += actor.xvel;
    actor.ypos += actor.yvel;
}

Upvotes: 3

Related Questions