javascript push inside init method not updating array length correctly

Question

I'm trying to create an array of objects with an init method, and when I push an object into an array, it should push another object into the array, while keeping track of the length of the array.. The problem is that it doesn't update the length of the array until all the objects have been added, so when each object tries to grab the length, they all get 0. How can I have it update the length in this process? here's the jfiddle: http://jsfiddle.net/bg3Vg/13/ As you can see it gives a message showing that the grouptotal is 5, but it seems as if the total counts up from the last pushed object to the first.. I need it to work in the correct order so that the last pushed object can retrieve the correct length.

var colorGroup = [];
var grouptotal = 0;

colorGroup.push(new groupdata(0) );
alert(grouptotal+","+colorGroup[colorGroup.length-1].parent);

function groupdata(parent) {
    this.parent = parent;
    this.refnum;

    this.init =  function() 
    {
        grouptotal++;
        this.refnum = colorGroup.length;
        if(grouptotal<5)colorGroup.push(new groupdata( this.refnum ) );
    }
    this.init();

}

edit: ok, I found a way to solve my problem I think. Let me know how horrid this solution is..http://jsfiddle.net/EqAqv/1/

var colorGroup = [];
var grouptotal = 0;

var colorGroupWait = [];

colorGroup.push(new groupdata(0) );

while(colorGroupWait.length>0){
    var newcolorGroup = colorGroupWait.shift();

    colorGroup.push(new groupdata(newcolorGroup) );
}

alert(grouptotal+","+colorGroup[colorGroup.length-1].parent);  
alert(grouptotal+","+colorGroup[colorGroup.length-2].parent); 

function groupdata(parent) {
    this.parent = parent;
    this.refnum;

    this.init =  function() 
    {
        grouptotal++;
        this.refnum = colorGroup.length;
         if(colorGroup.length<5)colorGroupWait.unshift( this.refnum );
    }
    this.init();

}

Answer 1

@EthanBrown has already pointed out the problems. Here is a solution that puts all the logic in the constructor, and avoids the problem of pushing the instance after having it created from a wrong number.

function GroupData(parentnum) {
    this.parentnum = parentnum;

    this.refnum = GroupData.colorGroup.length;
    GroupData.colorGroup.push(this);

    if (GroupData.colorGroup.length < 5)
        new GroupData(this.refnum);
}
GroupData.colorGroup = [];

var root = new GroupData(0);
alert(GroupData.colorGroup.length+", "
     +GroupData.colorGroup[GroupData.colorGroup.length-1].parentnum);

Answer 2

JavaScript arrays do update the length property as soon as you push something on to them. The problem is that you're recursively calling the constructor, so the statement this.refnum = colorGroup.length is getting executed for each initialization BEFORE any push occurs.

In other words, JavaScript is working as expected.

Is there any particular reason you are doing it in this convoluted manner? It be more straightforward (and achieve the result you're looking for) if you just did it like this:

for(grouptotal=0; grouptotal<5; grouptotal++){
    colorGroup.push( new groupdata(grouptotal) );
}

Also, it is convention in JavaScript to name object constructors with a capital letter. So, while groupdata is not invalid syntax, it is confusing: you should consider naming it Groupdata.