1
00:00:00,140 --> 00:00:02,480
This final practice is pretty challenging.

2
00:00:02,480 --> 00:00:05,110
If you had trouble completing
it you're not alone.

3
00:00:05,110 --> 00:00:08,160
If you weren't able to get it to work,
I hope you struggled with it for

4
00:00:08,160 --> 00:00:11,290
a while and
are now ready to see how I did it.

5
00:00:11,290 --> 00:00:12,890
Let's jump in.

6
00:00:12,890 --> 00:00:16,720
In this project you're supposed to
create a function named createDeck,

7
00:00:16,720 --> 00:00:20,510
that builds a two dimensional array,
a deck of cards.

8
00:00:20,510 --> 00:00:23,570
You need to use two nested for
loops to do it.

9
00:00:23,570 --> 00:00:26,100
It's a good challenge, so
let's take a look at it.

10
00:00:26,100 --> 00:00:29,700
We started out with a function for
shuffling the elements in an array.

11
00:00:33,326 --> 00:00:36,560
It uses the Fisher-Yates
shuffle algorithm.

12
00:00:36,560 --> 00:00:39,690
See the teacher's notes for links for
more information on this, but

13
00:00:39,690 --> 00:00:44,080
basically you pass an array to it and
it returns the array with the order of

14
00:00:44,080 --> 00:00:48,060
each element randomized,
like shuffling a deck of cards.

15
00:00:48,060 --> 00:00:52,770
We also provided the basic start of the
createDeck function with two arrays and

16
00:00:52,770 --> 00:00:55,550
a variable named deck that
holds an empty array.

17
00:00:57,220 --> 00:01:01,690
The first step is to create a for loop
to iterate through the array of suits.

18
00:01:01,690 --> 00:01:03,510
You should be familiar with using a for

19
00:01:03,510 --> 00:01:07,240
loop to iterate through an array,
you did it in the previous project.

20
00:01:07,240 --> 00:01:11,420
There are other ways to perform array
iteration, not just using a for loop.

21
00:01:11,420 --> 00:01:15,142
See the teacher's notes to other treehouse
videos that teach those methods.

22
00:01:15,142 --> 00:01:20,100
[BLANK AUDIO] This is

23
00:01:20,100 --> 00:01:23,660
just a loop that runs once for
each item in the suits array.

24
00:01:24,840 --> 00:01:27,105
The next step is to put another loop,

25
00:01:27,105 --> 00:01:30,820
one that loops through each
element in the ranks array.

26
00:01:30,820 --> 00:01:34,520
Basically, it's the same for loop, but
we use a different counter variable.

27
00:01:36,400 --> 00:01:42,240
I'll use j instead of i and reference
the ranks array to access its link.

28
00:01:42,240 --> 00:01:43,992
So, what's going on here?

29
00:01:43,992 --> 00:01:45,250
Well, the outer loop.

30
00:01:47,780 --> 00:01:51,460
Runs once for
each element in the suits array.

31
00:01:51,460 --> 00:01:55,590
The inner loop runs once for
each element in ranks.

32
00:01:55,590 --> 00:01:59,720
So, the outer loop will run four times,
once for each suite, spades,

33
00:01:59,720 --> 00:02:02,040
clubs, hearts, and diamonds.

34
00:02:02,040 --> 00:02:06,570
The second loop will run 13 times,
once for each item in the ranks array.

35
00:02:06,570 --> 00:02:09,720
Ace, king, queen, and so on, down to two.

36
00:02:09,720 --> 00:02:14,305
Because the second loop
is inside the first loop,

37
00:02:14,305 --> 00:02:20,540
it will run completely before
the next iteration of the outer loop.

38
00:02:20,540 --> 00:02:25,390
So 13 times 4 is 52, the 52 cards
in a standard playing card deck.

39
00:02:25,390 --> 00:02:31,575
Let's just logout the i and j values and

40
00:02:31,575 --> 00:02:38,329
run this program to see
what it looks like.

41
00:02:44,520 --> 00:02:48,700
I'll add some temporary code to call this
function so we can see what's happening.

42
00:02:51,900 --> 00:02:53,370
I'll save this file.

43
00:02:56,457 --> 00:02:57,920
And go to the console.

44
00:03:03,370 --> 00:03:05,650
And run it, typing node 3_deck.js.

45
00:03:05,650 --> 00:03:13,850
So, you can see that the inner loop
runs through all of its values first,

46
00:03:13,850 --> 00:03:18,900
within each cycle of the outer loop.

47
00:03:18,900 --> 00:03:21,980
Okay, I'll close the console and
remove this code.

48
00:03:23,790 --> 00:03:27,965
Now, inside those loops
we'll build a card.

49
00:03:27,965 --> 00:03:31,430
I'll start by creating
a temporary variable called card.

50
00:03:31,430 --> 00:03:34,320
Let card equal an empty array.

51
00:03:36,300 --> 00:03:41,460
That array will hold two elements,
a rank, like ace and a suit, like hearts.

52
00:03:41,460 --> 00:03:43,860
We can use the push method to add these.

53
00:03:43,860 --> 00:03:45,128
First, let's add a rank.

54
00:03:45,128 --> 00:03:51,790
I'll type card.push and
pass ranks using the j index value.

55
00:03:51,790 --> 00:03:55,820
Remember, the interloop runs the same
number as there are elements

56
00:03:55,820 --> 00:03:57,280
in the ranks array.

57
00:03:57,280 --> 00:04:01,650
So the first time, the value is zero,
the next loop it's one.

58
00:04:01,650 --> 00:04:06,100
We use that index value, j, to grab
the element from the ranks array and

59
00:04:06,100 --> 00:04:08,390
push it onto the card array.

60
00:04:08,390 --> 00:04:13,180
You can push more than one element
onto an array with one push command.

61
00:04:13,180 --> 00:04:17,250
So, we can add another array element
by adding a comma and a new value.

62
00:04:19,214 --> 00:04:23,470
In this case, we're using an index
value from the outer loop, i,

63
00:04:23,470 --> 00:04:26,510
to get a value from the suites array.

64
00:04:26,510 --> 00:04:28,300
So, the first time the outer loop runs,

65
00:04:28,300 --> 00:04:33,890
the value is 0 and the element in
the suites array at index 0 is a spade.

66
00:04:33,890 --> 00:04:38,450
That i value will remain the same
the entire time the inter loop runs.

67
00:04:38,450 --> 00:04:41,930
In other words, this will build
all of the spade cards first,

68
00:04:41,930 --> 00:04:45,165
then all of the club cards, all of
the hearts and then all of the diamonds.

69
00:04:45,165 --> 00:04:49,390
Now, at this point we have
a regular array with two elements.

70
00:04:49,390 --> 00:04:54,320
To add that card to the deck,
we can push it onto the deck array.

71
00:04:56,704 --> 00:05:01,490
I'll type deck.push, and pass the card.

72
00:05:02,770 --> 00:05:05,540
This is is what creates
a two dimensional array,

73
00:05:05,540 --> 00:05:08,900
the deck is an array
containing other arrays.

74
00:05:08,900 --> 00:05:11,100
So once those two loops complete,

75
00:05:11,100 --> 00:05:16,150
we have a two-dimensional array
with 52 elements, 52 cards.

76
00:05:16,150 --> 00:05:20,510
Now, the last step is to return that
array, but in a shuffled order.

77
00:05:28,300 --> 00:05:32,180
So, I'll call the shuffle function and
pass the deck to it.

78
00:05:32,180 --> 00:05:34,730
Now, there are a lot of curly braces here.

79
00:05:34,730 --> 00:05:40,118
The return statement needs to be at the
end of the function, outside of the loops.

80
00:05:40,118 --> 00:05:43,050
So make sure it goes just
before the final closing brace.

81
00:05:45,080 --> 00:05:47,190
Okay, there was a lot going on there.

82
00:05:47,190 --> 00:05:50,540
Before moving onto the next step,
I wanna make sure this is working.

83
00:05:50,540 --> 00:05:52,393
So, I'll create a variable named, myDeck.

84
00:05:56,200 --> 00:05:59,584
And I’ll call the function, createDeck.

85
00:05:59,584 --> 00:06:05,819
And lastly, I’ll just log out
myDeck using console.log method.

86
00:06:05,819 --> 00:06:09,440
I’ll save the file, open the console.

87
00:06:14,140 --> 00:06:22,310
And run the program by
typing node 3_deck.js.

88
00:06:22,310 --> 00:06:25,510
Cool, that's what a two
dimensional array looks like.

89
00:06:25,510 --> 00:06:29,351
Now, I'll just delete this
console.log statement.

90
00:06:32,360 --> 00:06:35,906
Now, it's just a matter of iterating
through the deck of cards and

91
00:06:35,906 --> 00:06:38,500
printing out each card, one at a time.

92
00:06:38,500 --> 00:06:40,340
You can do that easily with a for loop.

93
00:06:40,340 --> 00:06:43,010
I did something just like
it in the previous video.

94
00:06:43,010 --> 00:06:45,690
Let's start with a basic for
loop that runs once for

95
00:06:45,690 --> 00:06:47,620
each item in the myDeck array.

96
00:07:00,740 --> 00:07:02,250
Now, within the loop.

97
00:07:04,496 --> 00:07:07,000
I'll call the console.log method.

98
00:07:07,000 --> 00:07:11,050
Let's see what happens if we
look at the i item in the array.

99
00:07:11,050 --> 00:07:15,340
This is what you do with a regular array
to examine each item in that array.

100
00:07:16,910 --> 00:07:17,990
I'll save this file.

101
00:07:19,840 --> 00:07:21,150
Open up the console again.

102
00:07:25,290 --> 00:07:26,620
And run the program.

103
00:07:29,730 --> 00:07:32,770
Notice that each line is an array.

104
00:07:32,770 --> 00:07:34,260
That's not quite what we want.

105
00:07:34,260 --> 00:07:38,430
I want to have output that says something
like, 7 of hearts, or Ace of spades.

106
00:07:38,430 --> 00:07:43,040
In a two dimensional array,
you use a second set of brackets to dig

107
00:07:43,040 --> 00:07:46,090
into just one of the items
in the nested array.

108
00:07:46,090 --> 00:07:49,870
Now, because the rank, ace,
king, etc., is the first item,

109
00:07:49,870 --> 00:07:54,550
I'll add a pair of brackets and a 0,
to indicate the first index position.

110
00:07:58,170 --> 00:08:04,470
I'll save this file again,
go back to the console, and run it.

111
00:08:06,910 --> 00:08:10,670
Now, there's each of the ranks
printed out, but not the suits.

112
00:08:10,670 --> 00:08:13,690
Now, that's easy to fix with just
some simple string concatenation.

113
00:08:20,770 --> 00:08:25,417
Because the suit is stored in the second
position of the nested array,

114
00:08:25,417 --> 00:08:26,930
I use a 1 to access it.

115
00:08:27,980 --> 00:08:30,040
Save the file and run it again.

116
00:08:35,979 --> 00:08:39,770
Ta-da, a listing of each
card in my shuffled deck.

117
00:08:39,770 --> 00:08:41,270
If I run this program again.

118
00:08:45,496 --> 00:08:49,830
I'll see a new order for the cards,
a new shuffled arrangement.

119
00:08:49,830 --> 00:08:51,420
If your project isn't working,

120
00:08:51,420 --> 00:08:54,630
check your code against the code
pasted in the teacher's notes.

121
00:08:54,630 --> 00:08:57,450
Pay close attention to
the items you may have missed.

122
00:08:57,450 --> 00:08:59,470
Think about why you may
have missed them and

123
00:08:59,470 --> 00:09:03,420
if you need to revisit the videos from
the Loops, Arrays and Objects course,

124
00:09:03,420 --> 00:09:07,680
that can help clarify what you're not
quite yet understanding about arrays.

125
00:09:07,680 --> 00:09:12,100
Also if you are stuck, it's often really
helpful to reach out to our community and

126
00:09:12,100 --> 00:09:13,860
post a question to the form.

127
00:09:13,860 --> 00:09:15,710
We have a lot of students
who are eager to help.

128
00:09:15,710 --> 00:09:18,300
I hope you had fun with
this practice session and

129
00:09:18,300 --> 00:09:20,480
fun working with JavaScript Arrays.

130
00:09:20,480 --> 00:09:21,590
Good luck and see you later.