createSpaces() Method Solution2:46 with Ashley Boucher
See the solution for the createSpaces() method.
Well done, 0:00 I hope you enjoyed working through the createSpaces method in the Board.js file. 0:01 Let's take a look at the solution. 0:06 First, you can see the documentation written for this method. 0:08 There's a summary line explaining that this method would generate a 2D array of 0:13 space objects. 0:17 And then there's a line indicating that an array will be returned, 0:18 followed by a description of the array. 0:21 The first step in this method is to create a variable called spaces that 0:23 holds an empty array. 0:28 This is the variable that will eventually be returned from the method. 0:29 After we create the variable, 0:33 we can go through the business of populating the array. 0:35 We know that the returned array should be a 2D array. 0:38 This means it's an array whose elements are also arrays. 0:42 The variable will hold an array of columns, 0:46 where each column is an array of individual space objects. 0:49 By setting it up this way, we can access each column of spaces as a whole, 0:53 which will be really helpful when it comes time to drop tokens. 0:57 So with that in mind, the first step is to create a for 1:01 loop that iterates through the number of columns. 1:04 Remember, the number of columns wias set in the constructor method and 1:07 can be accessed using this.columns. 1:13 Once we're inside the loop, we'll declare a new variable called column. 1:16 column is going to hold an array of the individual space objects in that column. 1:21 First, the column variable gets set to an empty array. 1:26 Then we write another for loop to iterate through the rows of that column. 1:29 Inside this nested for loop is where the new space objects are created. 1:34 We pass the space constructor method the value for the x and 1:39 y index of the for loops. 1:43 On the next line, we push the newly created space to the column array. 1:45 On each iteration through this nested for loop, 1:50 another space is added to the column. 1:52 After the column is complete, and the nested for loop is finished, 1:54 we push the entire column back into the spaces array. 1:59 Then the x index is increased by 1, and 2:02 the process continues until the entire board of spaces has been created. 2:04 After that, we return our array. 2:09 Don't forget about the method call, though. 2:12 At this point, we have to go back to our constructor method. 2:14 Make sure to adjust the spaces property so 2:17 then instead of being set to an empty array, it's set to the return value from 2:19 a call to the createSpaces method, like you see on the screen. 2:23 To clarify, this means that when the Board object is created, 2:27 all of the space objects are created as well. 2:30 Okay, that was pretty tough. 2:33 Nested for loops and two-dimensional arrays can be complicated to think about. 2:35 If you have any questions, head over to the Treehouse community. 2:39 All right, only two steps left and the foundation of our game is complete. 2:42
You need to sign up for Treehouse in order to download course files.Sign up