Javascript: Recursive function with for-Loop

Question

This is the third question I'm asking regarding this function (should I have redone it completely at this point, maybe).

The function builds a grid of parameter defined size and inserts data from a function, also parameter defined. I'm trying to be able to create a grid within a grid that contains unique objects, and despite numerous problems which have been so greatly answered here and here *Thank you @Bergi, I have yet another:

Here is the code, with some logs to the console to show what's up inside:

//Build a 3x3 grid constructor that can optionally pre-insert values into each cube
function buildGrid(rows,cols,dataFunction){
    console.log("Let's see, we have an order for "+rows+" rows, "+cols+" cols and within each,"+dataFunction);
    //check to see if dataFunction provided, and type
    if(arguments.length !== 3){
        dataFunction = function(){return 0;};
    }

    var customGrid = [];

    //create grid
    for(row=0;row<rows;row++){console.log("creating row "+(row+1)+" of "+rows);
        var customRow = [];
        for(col=0;col<cols;col++){console.log("creating col "+(col+1)+" of "+cols);

            if(typeof dataFunction == 'function'){
                data = dataFunction(); 
            }

            else{
                data = dataFunction;
            }

            customRow.push(data);console.log("finished col "+(col+1)+" of "+cols);

        }
        customGrid.push(customRow);console.log("finished row "+(row+1)+" of "+rows);
    }
    console.log("Grid completed");
    return customGrid;
}

the function call looks like this:

var myGrid=buildGrid(3,3,function(){return buildGrid(2,2,buildSquare)});

buildSquare is just a constructor function.

Now here is the console log:

evalresult[eval12][52]:  
Let's see, we have an order for 3 rows, 3 cols and within each, function (){return buildGrid(2,2,buildSquare)}
evalresult[eval12][61]:  
creating row 1 of 3
evalresult[eval12][63]:  
creating col 1 of 3
evalresult[eval12][52]:  
Let's see, we have an order for 2 rows, 2 cols and within each, function buildSquare(){counter++;return new Square();}
evalresult[eval12][61]:  
creating row 1 of 2
evalresult[eval12][63]:  
creating col 1 of 2
evalresult[eval12][73]:  
finished col 1 of 2
evalresult[eval12][63]:  
creating col 2 of 2
evalresult[eval12][73]:  
finished col 2 of 2
evalresult[eval12][76]:  
finished row 1 of 2
evalresult[eval12][61]:  
creating row 2 of 2
evalresult[eval12][63]:  
creating col 1 of 2
evalresult[eval12][73]:  
finished col 1 of 2
evalresult[eval12][63]:  
creating col 2 of 2
evalresult[eval12][73]:  
finished col 2 of 2
evalresult[eval12][76]:  
finished row 2 of 2
evalresult[eval12][78]:  
Grid Completed
evalresult[eval12][73]:  
finished col 3 of 3
evalresult[eval12][76]:  
finished row 3 of 3
evalresult[eval12][78]:  
Grid Completed

Spot the problem? First the larger 3x3 function starts, and at 'data = dataFunction();', the call for the inside 2x2 function begins. Once the 2x2 function is complete, the function SHOULD jump to the next part of the 3x3 grid, but instead, returns the grid incomplete. I would think that the for-loop variables (namely 'rows' and 'cols') would be tied with values within their small scope and that the inside 2x2 grid's FOR variables would not influence the FOR variables for the outer scope in the 3x3 grid. Is this what is happening?

What am I missing here?

Thank you all so much.

Answer 1

You need to declare the variable "row" with var inside the function. As it stands, the variable is global, and thus when a nested call is made to "buildGrid" that code will be manipulating the same variable.

Declare "data" with var too. A good habit to get into is to include the line

"use strict";

at the top of either your overall JavaScript block, or if that's problematic, at least at the top of your functions. That puts the runtime into "strict" mode, and in that mode a failure to declare a variable like that results in an error.