javascript magically inserting an empty var into a new array / changing its length?

Question

So i have a piece of code like this:

this.convertParametersToGroups = function (nodes) {

        self.selectedParametersGroup([]);
        var emptyParametersList = [];

        var pos = 0;
        var group;
        var tempParametersGroup = [];         
                            // tempParametersGroup: Array[1]
                            // 0: undefined   

        $.each(nodes, function (key, val) {
            emptyParametersList.push(0);
            group = self.convertNodeToParameterGroup(val);
            group.position = pos;
            tempParametersGroup.push(group);
            pos++;
        });

        self.selectedParametersGroup(tempParametersGroup);

        return emptyParametersList;
    };

The commented results don't change when I reorder the declarations. When i had "group" in an $.each loop, it inserted an undefined value in the first iteration, before executing the first statement in the callback.

However, when I change their names around like this:

this.convertParametersToGroups = function (nodes) {

        self.selectedParametersGroup([]);
        var emptyParametersList = [];

        var pos = 0;
        var g;
        var tempParametersGr = [];         
                            // tempParametersGr: Array[0]

        $.each(nodes, function (key, val) {
            emptyParametersList.push(0);
            g = self.convertNodeToParameterGroup(val);
            g.position = pos;
            tempParametersGr.push(g);
            pos++;
        });

        self.selectedParametersGroup(tempParametersGr);

        return emptyParametersList;
    };

It works as in comments. Seems like javascript somehow maps the "group" name to the "Group" suffix of the array and inserts it or forces length increment. Am I missing some known language feature or...?

Answer 1

You can try debugging this way, it should be very clear when the undefined was actually added to the array:

function makeClone( arr ) {
    return JSON.parse( JSON.stringify( arr ) );
}

this.convertParametersToGroups = function (nodes) {

        self.selectedParametersGroup([]);
        var emptyParametersList = [];

        var pos = 0;
        var group;
        var tempParametersGroup = [];

        console.log( "before loop", makeClone( tempParametersGroup ) );


        $.each(nodes, function (key, val) {
            console.log( "before iteration", key, makeClone( tempParametersGroup ) );
            emptyParametersList.push(0);
            group = self.convertNodeToParameterGroup(val);
            group.position = pos;
            tempParametersGroup.push(group);
            pos++;
            console.log( "after iteration", key, makeClone( tempParametersGroup ) );
        });

        console.log( "after loop", makeClone( tempParametersGroup ) );

        self.selectedParametersGroup(tempParametersGroup);

        return emptyParametersList;
    };