Using Two-Dimensional Arrays

[00:00:00]
>> Moving on from option two as our starting point, why are we still recomputing these indexes? We don't need to recompute the indexes, do we? Because we saved it with the title element. Let's get rid of these index UPS. Now, we don't need the board yell anymore. It's nice.

[00:00:39]
Or do we need the road yield? I love it when I get to delete stuff, my favorite programming activity. Does anybody spot the problem with this code? What's gonna happen right here? Actually, I'll be even more specific about it. What's gonna happen right here?
>> Someone said strings.

[00:00:58]
>> Yep, we still have the same problem. These things are coming out as stings and we're trying to do numerical addition with them. And depending on which numerical mathematics we do with it, we might end up getting string concatenation instead of incrementation the way that we want. So quick little fix.

[00:01:21]
If we can just, Force those to be numbers. Number is my favorite way to explicitly cast a string to a number. Other people like the plus operator in front of it. I think that's harder to understand. Next thing that we want to change, I know we're kind of going back and forth on a number of these things.

[00:01:51]
But that's okay, we're kind of doing this on purpose. The next thing that we want to change is, let's get rid of having this as a single-dimensional DOMLIST. And let's make a data structure that is a two-dimensional JavaScript array, that is a native JavaScript array that is going to run much faster.

[00:02:11]
Because we're still touching the DOM with every access of that tiles array, every iteration over the tiles array, we're still touching the native DOM. Let's go and just get references to those DOM elements into a real two dimensional JavaScript array that represents our grid. It represents our chessboard.

[00:02:28]
It's the data structure that we probably should have done at the beginning, but we got away with just using the DOM as a data structure to start with. And now we want to create a real data structure that is a two dimensional array. Turns out it's not gonna be nearly as hard as you think it is.

[00:02:45]
To do that, we're just gonna construct that two dimensional array, as we construct the doll. So I'll make tiles into an array. I will, For each row, construct a row array, we'll call it row tiles here. I will append into row tiles, a reference to the div that we just created.

[00:03:12]
So rowTiles.push(tileEl) I think for good measure I'll put that at the end, just so, it's more obvious where that's happening. And then, after I've appended, I don't need to append anything, because rowTiles is, it needs to be pushed into tiles ahead of time. So, tiles.push rowTiles. Now I can get rid of this line.

[00:03:48]
I love deleting things. There's where we got rid of that whole query selector all call. So now we're just pushing into this array, a set of row arrays and into those row arrays, respectively the tile element references. Can everybody see that the end result of the draw function is that we now have a DOM built up of a two dimensional matrix of DOM elements.

[00:04:13]
And we separately have a two dimensional JavaScript array with references to those DOM elements. It's kind of like an index, like we did in the other exercise. Our JavaScript array is not holding any new data, it's just holding references to the DOM elements that are in the DOM.

[00:04:30]
So we've constructed ourselves a nice little fast index to get at the elements that we want. Unfortunately, it is gonna temporarily slightly complicate our loop here. So we're going to need to do a two-dimensional loop to be able to go through them now instead of a single-dimensional loop.

[00:04:59]
So our clearing of the highlighted is now going to be row of tiles and tile, we'll just call it el of row. And we'll do the same thing down here with our FindTile, we need to adjust this. But here's a bit of a payoff. I'm more excited about this payoff than you are but I like it that this is just now that.

[00:05:53]
And in fact, you look at that, and you say, well, if the only thing that fine tile is doing is simply accessing that position in an array, maybe we don't even need a fine tile function. JavaScript would do the inlining for us, but I would argue that this is just gonna be clear code to get rid of fine tile.

[00:06:18]
And unfortunately I'm gonna have to change those parentheses to square brackets. I mean take out the parentheses I should have done let me back this up. I should have done tiles, And then I change these, To square brackets.And now we can just delete find tile entirely, which gives me even more joy.

[00:06:58]
I can't do comma that way. That's not JavaScript it should be, but it's not. We got to do the two square brackets thing. I'm going to regression test my code to make sure I didn't make another dumb mistake. Hey look at that still working. There are undoubtedly other optimizations that we could make to this code.

[00:07:57]
But I got to be honest with you, I'm getting a little bit tired of trying to polish what is basically just an ugly piece of junk. And at this moment, I as an algorithmist I'm asking myself, did some of those early decisions I make sort of paint me into a corner?

[00:08:20]
Did they force me down on a road that I now wish I wasn't down. And I'm gonna do is, any good algorithmic should do at some point. You need to take a step back and potentially we think the whole problem. This code roughly l Minus a few potentially slightly different variable names, this is option three.

[00:08:46]
So that's your new starting point for the final iteration that we're going to make on this code. But before we make that iteration on this code, we've got to go rewire our brains.