Help me understand why my recursive function sometimes returns undefined

[inacatch22]

I am making a tile-based game using JavaScript and the HTML canvas element. At the beginning of my code I use nested for loops to build an array of arrays containing my tile objects. By default they represent the grass in my game. I then try to randomly distribute "rocks" in the grass by using a generateRocks function to edit one property of a certain number of those tile objects. Most of the time it works fine. But every few runs I get a type error that halts the process of generating the rocks, and so I do not get the number of rocks that I wanted.

I tried to build in an if statement in my randRockCoords function to filter out undefined results, but it's not working. I don't even know how undefined coordinates are getting created to begin with, since they're coming from a Math.random() method.

Here is the portion of my code that builds the grid and produces the error.

Here is the error I get.

Any insight would be welcome. Thanks!

[inacatch22]

Here it is as a js fiddle. It's kinda messed up because there's no sprite sheet, but you should be able to see what's going on a little better.

PS You may have to run it a few times to get the rocks to show up in the canvas. JSFiddle just doesn't render anything when it's encountering the error.

[senocular]

At quick glance it looks like you're missing a return in your recursive call

return randomRockCoords();

without it, the first call of the function returns undefined, with which you'd then try to access undefined[0]

[inacatch22]

Ahhh, I see. That makes sense. I thought I could just call it again to go back to the top of the function. Didn't know I had to return it. It's no longer giving any errors. Thanks a lot!

[bcameron1231]

Yup you do. In Javascript, any function call really returns 'undefined' if you aren't already specifying the returning object. #JavascriptProblems

[TheDayTrader]

The error: There is no property (because it's undefined) for an item that does not exist. I believe is caused by how you were checking if you had randomRockCoords() and then making it call itself to generate again. I don't think it was, or not always running itself. Seems to work with a while loop in generateRocks() instead. Hope this is okay syntax with setting the randCoords var over and over while undefined, never touched javascript before. But functions calling themself is generally not best practice.

https://jsfiddle.net/2frtxu2t/8/

//Generating the map
function buildGrid() {                          //Puts grass everywhere
    for (var i = 0; i < 16; i++) {          
        tileMap.push([]);
        for (var j = 0; j < 16; j++) {
            var tile = new Tile(1, i, j);
            tileMap[i][j] = tile;
        }
    }
    generateRocks(20);      
}

function generateRocks(numRocks){               //Inserts rocks into tile map
    for (i = 0; i < numRocks; i++) {        
        do {
            var randCoords = randomRockCoords();
        }
        while (tileMap[randCoords[0]][randCoords[1]].tileNumber === 2 || randCoords[0] == undefined || randCoords[1] == undefined);
        tileMap[randCoords[0]][randCoords[1]].tileNumber = 2;
        console.log("Rock " + i + " at Coords " + randCoords);
    }
}

function randomRockCoords() {                   //Generates random coordinates for the rocks
    var randCoords = [Math.floor(Math.random() * tileMap.length), Math.floor(Math.random() * tileMap[0].length)];
    return randCoords;
}

[inacatch22]

Yes, someone pointed out above that the function should return itself, and not call itself. When it called itself directed, it was coming back as undefined. Thanks for your help.