Javascript looping through prototype

Question

Please consider the code:

// define the GameObject constructor function

    var GameObject = function(width, height) {
    this.x = Math.floor((Math.random() * myCanvasWidth) + 1);
    this.y = Math.floor((Math.random() * myCanvasHeight) + 1);
    this.width = width;
    this.height = height;
    return this;
};

// (re)define the GameObject prototype object

GameObject.prototype = {
    x: 0,
    y: 0,
    width: 5,
    width: 5,
    draw: function() {
        myCanvasContext.fillRect(this.x, this.y, this.width, this.height);
    }
};

We can then instantiate the GameObject 100 times.

var x = 100,
arrayOfGameObjects = [];
do {
    arrayOfGameObjects.push(new GameObject(10, 10));
    } while(x--);

Now we have an array of 100 GameObjects, which all share the same prototype and definition of the draw method, which drastically saves memory within the application.

When we call the draw method, it will reference the exact same function.

var GameLoop = function() {
    for(gameObject in arrayOfGameObjects) {
        gameObject.draw(); // this is my problem. Is this correct? gameObject is simply and index who draw() method gets executed
    }
};

My problem is with the last line code where method draw() is getting executed. Since gameObject is simply an Index, how can draw() method get executed? That index doesn't hold any object. It is simply an index right?

Here is a link

Answer 1

You should really use the following for your GameLoop :

var GameLoop = function() {
    for(var i = 0; i < arrayOfGameObjects.length; i++) {
        arrayOfGameObjects[i].draw();
    }
};

Answer 2

Use a plain for loop to iterate through an array.

var GameLoop = function() {
    for (var i = 0; i < arrayOfGameObjects.length; i++) {
        arrayOfGameObjects[i].draw();
    }
};

It's actually bad practice to use a for in loop on an array since it's just a round about way to get the indexes that you want.

Answer 3

I like jquery $.each

$.each(arrayOfGameObjects, function(i, gObject) {
    gObject.draw();
});

Otherwise as described by others use for with iteration using array length.

Answer 4

var GameLoop = function() {
    for(var i = 0, len = arrayOfGameObjects.length; i<len; i++) {
        gameObject.draw();
    }
};

See this working on http://jsfiddle.net/SdBcx/2/

Some notes:

• It is bad practice to use the for(obj in array) on Array objects. The reason why is, if you add a custom function to Array.prototype , the custom function will appear in your for loop! I've written an example of this here: http://jsfiddle.net/BUp6T/
• You can see that I am saving the arrayOfGameObjects.length in the len variable. This happens only once, before the loop executes. This is significantly faster than the common solution which is: for(var i = 0; i < arrayOfGameObjects.length; i++) which retrieves the array length every single loop iteration.