Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
      You have completed Object-Oriented JavaScript: Challenge!
      
    
You have completed Object-Oriented JavaScript: Challenge!
Preview
    
      
  See the solution for the createSpaces() method.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
                      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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up