Trying to learn For loops the right way

Question

I've been teaching my self Node.JS recently, and its been fun. However I've hit a road block that is really killing me here. I've come to realize that I can't wrap my head around For loops in JS. Whenever I've gone to use for loops I end up just using jquery $.each() to spare my head. Well I can't rely on .each for what I'm attempting and I'm stuck trying to wrap my head around For loops. Here is what I'm working with.

Just for some context, I've been playing around with websockets in node.js. Its a lot of fun! I started with the standard ChatApp that you find everywhere, and now I'm attempting to build a multiplayer Tic-Tac-Toe game. When a player clicks on the grid, the grid choice is stored in a list inside the player object on the node.js websocket server.

The last thing I'm trying to do is compare the list of picked board nodes to a master list of possible tic-tac-toe solutions:

        //i'm sure this can be formatted better....
             var solutions = {
                'vert':{
                    1:[[0,0],[0,1],[0,2]],
                    2:[[1,0],[1,1],[2,1]],
                    3:[[2,0],[2,1],[2,2]]
                },
                'hor':{
                    1:[[0,0],[1,0],[2,0]],
                    2:[[0,1],[1,1],[2,1]],
                    3:[[0,2],[1,2],[2,2]]
                },
                'diag':{
                    1:[[0,0],[1,1],[2,2]],
                    2:[[2,0],[1,1],[0,2]]
                }
            };

    // player selected grid coordinates
            var player1 = {
                'picked':[[0,0],[1,1],[2,2]]
            };

// the big dumb function that I hate. 
function winCondition(solutions){
    var win = '';
    console.log('-------------------------------------------------------');
    if(win === ''){
        $.each(solutions, function(index, solution){
            $.each(solution, function(index, winCon){
                console.log('testing Win Condition ' + index,winCon);
                matches = 0;
                if(matches !== 3){
                    console.log('current match value = ' + matches);
                    $.each(winCon, function(index, gridSlot){
                        console.log('Testing ' + index,gridSlot);
                        $.each(player1.picked, function(index,gridChoice){
                            console.log('does '+ gridSlot + ' = ' + gridChoice);
                            if(gridSlot[0] == gridChoice[0] && gridSlot[1] == gridChoice[1]){
                                matches = matches + 1;
                                console.log('match! ' + matches + '/3 left');
                                if(matches == 3){
                                    win = true;
                                }
                            }
                        });
                    });
                }
            });
        });
    }
    if (win === true){
        return true;
    } else {
        return false;
    }
}

I tested this in codepen for a while and it seems to work as I want, except for the lack of .each serverside!

So how can I achieve the same results... every time I look at a for loop example my brain turns up side down. I'm sure I'm over complicating this whole matter but I've been plugging away at this for a few hours now and I think I blew a resister somewhere in my brain.

Answer 1

Interestingly, as a best practice you shouldn't be using a for...in loop on arrays , which can get you into trouble. A regular for loop is fine , but for your situation I would recommend using the .forEach() method on the arrays themselves, like so:

var array = ['foo', 'bar', 'baz'];

array.forEach(function (element, index, array) {
    console.log(element, index, array);
}

This is a very similar method to jQuery's .each() , which should make the transition more straightforward.