Preview
Video Player
00:00
00:00
Build a Two-Dimensional Array
9:22Use nested loops to build a multi-dimensional array.
This final practice is pretty challenging.
0:00
If you had trouble completing
it you're not alone.
0:02
If you weren't able to get it to work,
I hope you struggled with it for
0:05
a while and
are now ready to see how I did it.
0:08
Let's jump in.
0:11
In this project you're supposed to
create a function named createDeck,
0:12
that builds a two dimensional array,
a deck of cards.
0:16
You need to use two nested for
loops to do it.
0:20
It's a good challenge, so
let's take a look at it.
0:23
We started out with a function for
shuffling the elements in an array.
0:26
It uses the Fisher-Yates
shuffle algorithm.
0:33
See the teacher's notes for links for
more information on this, but
0:36
basically you pass an array to it and
it returns the array with the order of
0:39
each element randomized,
like shuffling a deck of cards.
0:44
We also provided the basic start of the
createDeck function with two arrays and
0:48
a variable named deck that
holds an empty array.
0:52
The first step is to create a for loop
to iterate through the array of suits.
0:57
You should be familiar with using a for
1:01
loop to iterate through an array,
you did it in the previous project.
1:03
There are other ways to perform array
iteration, not just using a for loop.
1:07
See the teacher's notes to other treehouse
videos that teach those methods.
1:11
[BLANK AUDIO] This is
1:15
just a loop that runs once for
each item in the suits array.
1:20
The next step is to put another loop,
1:24
one that loops through each
element in the ranks array.
1:27
Basically, it's the same for loop, but
we use a different counter variable.
1:30
I'll use j instead of i and reference
the ranks array to access its link.
1:36
So, what's going on here?
1:42
Well, the outer loop.
1:43
Runs once for
each element in the suits array.
1:47
The inner loop runs once for
each element in ranks.
1:51
So, the outer loop will run four times,
once for each suite, spades,
1:55
clubs, hearts, and diamonds.
1:59
The second loop will run 13 times,
once for each item in the ranks array.
2:02
Ace, king, queen, and so on, down to two.
2:06
Because the second loop
is inside the first loop,
2:09
it will run completely before
the next iteration of the outer loop.
2:14
So 13 times 4 is 52, the 52 cards
in a standard playing card deck.
2:20
Let's just logout the i and j values and
2:25
run this program to see
what it looks like.
2:31
I'll add some temporary code to call this
function so we can see what's happening.
2:44
I'll save this file.
2:51
And go to the console.
2:56
And run it, typing node 3_deck.js.
3:03
So, you can see that the inner loop
runs through all of its values first,
3:05
within each cycle of the outer loop.
3:13
Okay, I'll close the console and
remove this code.
3:18
Now, inside those loops
we'll build a card.
3:23
I'll start by creating
a temporary variable called card.
3:27
Let card equal an empty array.
3:31
That array will hold two elements,
a rank, like ace and a suit, like hearts.
3:36
We can use the push method to add these.
3:41
First, let's add a rank.
3:43
I'll type card.push and
pass ranks using the j index value.
3:45
Remember, the interloop runs the same
number as there are elements
3:51
in the ranks array.
3:55
So the first time, the value is zero,
the next loop it's one.
3:57
We use that index value, j, to grab
the element from the ranks array and
4:01
push it onto the card array.
4:06
You can push more than one element
onto an array with one push command.
4:08
So, we can add another array element
by adding a comma and a new value.
4:13
In this case, we're using an index
value from the outer loop, i,
4:19
to get a value from the suites array.
4:23
So, the first time the outer loop runs,
4:26
the value is 0 and the element in
the suites array at index 0 is a spade.
4:28
That i value will remain the same
the entire time the inter loop runs.
4:33
In other words, this will build
all of the spade cards first,
4:38
then all of the club cards, all of
the hearts and then all of the diamonds.
4:41
Now, at this point we have
a regular array with two elements.
4:45
To add that card to the deck,
we can push it onto the deck array.
4:49
I'll type deck.push, and pass the card.
4:56
This is is what creates
a two dimensional array,
5:02
the deck is an array
containing other arrays.
5:05
So once those two loops complete,
5:08
we have a two-dimensional array
with 52 elements, 52 cards.
5:11
Now, the last step is to return that
array, but in a shuffled order.
5:16
So, I'll call the shuffle function and
pass the deck to it.
5:28
Now, there are a lot of curly braces here.
5:32
The return statement needs to be at the
end of the function, outside of the loops.
5:34
So make sure it goes just
before the final closing brace.
5:40
Okay, there was a lot going on there.
5:45
Before moving onto the next step,
I wanna make sure this is working.
5:47
So, I'll create a variable named, myDeck.
5:50
And I’ll call the function, createDeck.
5:56
And lastly, I’ll just log out
myDeck using console.log method.
5:59
I’ll save the file, open the console.
6:05
And run the program by
typing node 3_deck.js.
6:14
Cool, that's what a two
dimensional array looks like.
6:22
Now, I'll just delete this
console.log statement.
6:25
Now, it's just a matter of iterating
through the deck of cards and
6:32
printing out each card, one at a time.
6:35
You can do that easily with a for loop.
6:38
I did something just like
it in the previous video.
6:40
Let's start with a basic for
loop that runs once for
6:43
each item in the myDeck array.
6:45
Now, within the loop.
7:00
I'll call the console.log method.
7:04
Let's see what happens if we
look at the i item in the array.
7:07
This is what you do with a regular array
to examine each item in that array.
7:11
I'll save this file.
7:16
Open up the console again.
7:19
And run the program.
7:25
Notice that each line is an array.
7:29
That's not quite what we want.
7:32
I want to have output that says something
like, 7 of hearts, or Ace of spades.
7:34
In a two dimensional array,
you use a second set of brackets to dig
7:38
into just one of the items
in the nested array.
7:43
Now, because the rank, ace,
king, etc., is the first item,
7:46
I'll add a pair of brackets and a 0,
to indicate the first index position.
7:49
I'll save this file again,
go back to the console, and run it.
7:58
Now, there's each of the ranks
printed out, but not the suits.
8:06
Now, that's easy to fix with just
some simple string concatenation.
8:10
Because the suit is stored in the second
position of the nested array,
8:20
I use a 1 to access it.
8:25
Save the file and run it again.
8:27
Ta-da, a listing of each
card in my shuffled deck.
8:35
If I run this program again.
8:39
I'll see a new order for the cards,
a new shuffled arrangement.
8:45
If your project isn't working,
8:49
check your code against the code
pasted in the teacher's notes.
8:51
Pay close attention to
the items you may have missed.
8:54
Think about why you may
have missed them and
8:57
if you need to revisit the videos from
the Loops, Arrays and Objects course,
8:59
that can help clarify what you're not
quite yet understanding about arrays.
9:03
Also if you are stuck, it's often really
helpful to reach out to our community and
9:07
post a question to the form.
9:12
We have a lot of students
who are eager to help.
9:13
I hope you had fun with
this practice session and
9:15
fun working with JavaScript Arrays.
9:18
Good luck and see you later.
9:20