1 00:00:00,843 --> 00:00:01,490 Well done, 2 00:00:01,490 --> 00:00:06,034 I hope you enjoyed working through the createSpaces method in the Board.js file. 3 00:00:06,034 --> 00:00:08,055 Let's take a look at the solution. 4 00:00:08,055 --> 00:00:11,176 First, you can see the documentation written for this method. 5 00:00:13,225 --> 00:00:17,237 There's a summary line explaining that this method would generate a 2D array of 6 00:00:17,237 --> 00:00:18,065 space objects. 7 00:00:18,065 --> 00:00:21,529 And then there's a line indicating that an array will be returned, 8 00:00:21,529 --> 00:00:23,611 followed by a description of the array. 9 00:00:23,611 --> 00:00:28,228 The first step in this method is to create a variable called spaces that 10 00:00:28,228 --> 00:00:29,723 holds an empty array. 11 00:00:29,723 --> 00:00:33,731 This is the variable that will eventually be returned from the method. 12 00:00:33,731 --> 00:00:35,533 After we create the variable, 13 00:00:35,533 --> 00:00:38,799 we can go through the business of populating the array. 14 00:00:38,799 --> 00:00:42,023 We know that the returned array should be a 2D array. 15 00:00:42,023 --> 00:00:46,435 This means it's an array whose elements are also arrays. 16 00:00:46,435 --> 00:00:49,221 The variable will hold an array of columns, 17 00:00:49,221 --> 00:00:53,002 where each column is an array of individual space objects. 18 00:00:53,002 --> 00:00:57,375 By setting it up this way, we can access each column of spaces as a whole, 19 00:00:57,375 --> 00:01:01,191 which will be really helpful when it comes time to drop tokens. 20 00:01:01,191 --> 00:01:04,315 So with that in mind, the first step is to create a for 21 00:01:04,315 --> 00:01:07,378 loop that iterates through the number of columns. 22 00:01:07,378 --> 00:01:13,081 Remember, the number of columns wias set in the constructor method and 23 00:01:13,081 --> 00:01:16,228 can be accessed using this.columns. 24 00:01:16,228 --> 00:01:21,223 Once we're inside the loop, we'll declare a new variable called column. 25 00:01:21,223 --> 00:01:26,018 column is going to hold an array of the individual space objects in that column. 26 00:01:26,018 --> 00:01:29,672 First, the column variable gets set to an empty array. 27 00:01:29,672 --> 00:01:34,737 Then we write another for loop to iterate through the rows of that column. 28 00:01:34,737 --> 00:01:39,136 Inside this nested for loop is where the new space objects are created. 29 00:01:39,136 --> 00:01:43,317 We pass the space constructor method the value for the x and 30 00:01:43,317 --> 00:01:45,114 y index of the for loops. 31 00:01:45,114 --> 00:01:50,243 On the next line, we push the newly created space to the column array. 32 00:01:50,243 --> 00:01:52,858 On each iteration through this nested for loop, 33 00:01:52,858 --> 00:01:54,911 another space is added to the column. 34 00:01:54,911 --> 00:01:59,076 After the column is complete, and the nested for loop is finished, 35 00:01:59,076 --> 00:02:02,377 we push the entire column back into the spaces array. 36 00:02:02,377 --> 00:02:04,800 Then the x index is increased by 1, and 37 00:02:04,800 --> 00:02:09,363 the process continues until the entire board of spaces has been created. 38 00:02:09,363 --> 00:02:12,642 After that, we return our array. 39 00:02:12,642 --> 00:02:14,502 Don't forget about the method call, though. 40 00:02:14,502 --> 00:02:17,527 At this point, we have to go back to our constructor method. 41 00:02:17,527 --> 00:02:19,750 Make sure to adjust the spaces property so 42 00:02:19,750 --> 00:02:23,879 then instead of being set to an empty array, it's set to the return value from 43 00:02:23,879 --> 00:02:27,263 a call to the createSpaces method, like you see on the screen. 44 00:02:27,263 --> 00:02:30,925 To clarify, this means that when the Board object is created, 45 00:02:30,925 --> 00:02:33,562 all of the space objects are created as well. 46 00:02:33,562 --> 00:02:35,228 Okay, that was pretty tough. 47 00:02:35,228 --> 00:02:39,442 Nested for loops and two-dimensional arrays can be complicated to think about. 48 00:02:39,442 --> 00:02:42,890 If you have any questions, head over to the Treehouse community. 49 00:02:42,890 --> 00:02:46,924 All right, only two steps left and the foundation of our game is complete.