0
1
00:00:00,570 --> 00:00:06,890
All right guys. Let's say that you've completed this course and you've built up a portfolio of web sites
1

2
00:00:06,930 --> 00:00:12,070
that you have coded up and you're ready to get a job as a web developer.
2

3
00:00:12,090 --> 00:00:18,060
Now one of the most common questions that you're going to encounter on any programming interview is something
3

4
00:00:18,060 --> 00:00:23,210
called FizzBuzz, and it's a really simple problem and this is usually how they would define it.
4

5
00:00:23,250 --> 00:00:29,670
So you have to write a program that prints the numbers from 1 to 100. But for multiples of three print
5

6
00:00:29,690 --> 00:00:35,760
"Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both
6

7
00:00:35,760 --> 00:00:40,560
three and five, for example fifteen, then print "FizzBuzz" instead of the number.
7

8
00:00:41,040 --> 00:00:46,950
So it's pretty simple, but it's a really easy way of seeing how you solve problems and demonstrating
8

9
00:00:46,980 --> 00:00:48,890
a candidate's programming skills.
9

10
00:00:48,990 --> 00:00:56,370
And just the other day I came across a article on Coding Horror, which is one of my favorite blogs, about
10

11
00:00:56,370 --> 00:00:58,310
why can't programmers program.
11

12
00:00:58,350 --> 00:01:03,510
And the interesting thing that they talk about is what seems to be common knowledge amongst programming
12

13
00:01:03,510 --> 00:01:08,820
recruiters, and the fact of the matter is that out of 200 applicants there's probably only one person
13

14
00:01:08,820 --> 00:01:10,450
who can actually code.
14

15
00:01:10,650 --> 00:01:12,970
And this is a really strange phenomenon.
15

16
00:01:13,000 --> 00:01:17,640
Part of the reason is down to the fact that completing computer science degrees doesn't necessarily
16

17
00:01:17,640 --> 00:01:24,630
enable people to code, and a lot of people will graduate from a computer science degree and they might
17

18
00:01:24,630 --> 00:01:30,330
know how, say, compilers work or, you know, some aspects of computer history, but they might not actually
18

19
00:01:30,330 --> 00:01:33,450
know exactly how to write good code.
19

20
00:01:33,480 --> 00:01:39,270
One of the most interesting statistics I came across is that in the UK some of the most in-demand jobs
20

21
00:01:39,300 --> 00:01:41,650
involve programming and software development,
21

22
00:01:41,940 --> 00:01:47,610
and yet the university degree that has the highest unemployment rate happens to be computer science,
22

23
00:01:48,000 --> 00:01:50,430
which is really really strange.
23

24
00:01:50,460 --> 00:01:56,730
So I'm going to use this classic interview question and I'm going to make it even more difficult because
24

25
00:01:56,790 --> 00:01:59,540
we're going to use it to learn all about arrays
25

26
00:01:59,550 --> 00:02:01,270
but on a slightly deeper level.
26

27
00:02:01,320 --> 00:02:08,640
So let's try and be better than 199 of programming interviewees, and let's look at this FizzBuzz problem
27

28
00:02:08,910 --> 00:02:11,250
and use it to learn more about arrays.
28

29
00:02:11,250 --> 00:02:18,810
So the problem is based on a game that children play in England in the UK which somebody at some point
29

30
00:02:18,810 --> 00:02:23,230
thought was fun, but that really depends on your definition of fun.
30

31
00:02:23,250 --> 00:02:30,630
So the idea is that you have a bunch of children in a circle and they will go in turn listing the numbers
31

32
00:02:30,630 --> 00:02:31,300
in sequence.
32

33
00:02:31,300 --> 00:02:33,090
So 1, 2, etc..
33

34
00:02:33,330 --> 00:02:39,660
But if the number that you have to call out is divisible by three then you have to shout Fizz instead
34

35
00:02:39,660 --> 00:02:40,550
of three.
35

36
00:02:40,620 --> 00:02:44,620
And if it's divisible by five you have to shout Buzz instead of five.
36

37
00:02:44,880 --> 00:02:49,380
And if your number is divisible by both then you have an even harder problem because you have to shout
37

38
00:02:49,380 --> 00:02:50,490
FizzBuzz.
38

39
00:02:50,490 --> 00:02:56,520
So, it's pretty simple given that kids can play it, so we can write a program that can simulate a child
39

40
00:02:56,520 --> 00:02:57,740
who can play FizzBuzz.
40

41
00:02:57,870 --> 00:03:03,510
So let's break down the problem. How can we write some code that prints out a sequence of numbers starting
41

42
00:03:03,510 --> 00:03:04,460
from 1?
42

43
00:03:04,470 --> 00:03:08,610
Clearly you can tell that, you know, these children are not going to be programmers because they start
43

44
00:03:08,610 --> 00:03:11,160
counting from 1 rather than 0.
44

45
00:03:11,160 --> 00:03:12,330
But this is how the game works
45

46
00:03:12,330 --> 00:03:13,530
so let's do that.
46

47
00:03:13,530 --> 00:03:19,200
We need to get our code to print out a sequence of numbers starting from 1 and, every single time we
47

48
00:03:19,200 --> 00:03:19,950
run the code,
48

49
00:03:19,980 --> 00:03:21,780
the next number gets called out.
49

50
00:03:21,870 --> 00:03:23,970
So let's create a new array.
50

51
00:03:24,120 --> 00:03:25,930
So let's create a new array,
51

52
00:03:26,020 --> 00:03:29,710
and let's call it output. And we're going to set it to an empty array.
52

53
00:03:29,760 --> 00:03:30,730
Now next,
53

54
00:03:30,750 --> 00:03:34,600
now we can either create a new array by giving it values to begin with,
54

55
00:03:34,620 --> 00:03:38,790
for example this is an array that contains 1, 2, 3, or
55

56
00:03:38,880 --> 00:03:46,830
you can start off with an empty array and use something called push in order to add new items into the
56

57
00:03:46,830 --> 00:03:49,710
array. So you can write output.push,
57

58
00:03:50,010 --> 00:03:55,170
and inside the parentheses you can put whatever it is that you want to push onto the array.
58

59
00:03:55,200 --> 00:03:57,130
So for example let's push number 1.
59

60
00:03:57,210 --> 00:04:04,440
So now if you print out output, then it's an array with a single item that's the number 1. And you can
60

61
00:04:04,440 --> 00:04:07,130
keep doing this output.push.
61

62
00:04:07,380 --> 00:04:09,610
Let's add 2 to this array.
62

63
00:04:09,780 --> 00:04:15,170
And now output is an array with two values that is 1 and 2.
63

64
00:04:15,270 --> 00:04:20,250
Now the important thing to remember about push is that it always pushes the item that you have in the
64

65
00:04:20,250 --> 00:04:23,000
parentheses to the end of the array.
65

66
00:04:23,010 --> 00:04:28,560
It doesn't push it in randomly into the array or at the beginning, it's always tagged on at the end.
66

67
00:04:28,680 --> 00:04:33,570
And this is a really easy way of adding new items into your array as needed,
67

68
00:04:33,570 --> 00:04:40,380
so in our case adding first 1, then 2, then 3, then 4, etc.. And a related function is something
68

69
00:04:40,380 --> 00:04:41,200
called pop.
69

70
00:04:41,220 --> 00:04:46,650
So you can pop items off your array by using the name of the array.pop.
70

71
00:04:46,650 --> 00:04:48,770
So in our case our array is called eggs.
71

72
00:04:48,930 --> 00:04:50,450
So if we say eggs.pop,
72

73
00:04:50,550 --> 00:04:55,620
then it will take the last item in the array and it will remove it from the array.
73

74
00:04:55,620 --> 00:05:01,360
So what we've seen is that we can basically keep saying output.push, and, each time we run this,
74

75
00:05:01,430 --> 00:05:09,010
our array gets a new number added to the sequence, and if we do this many many times then we end up with
75

76
00:05:09,010 --> 00:05:10,520
our sequence of numbers, right?
76

77
00:05:10,520 --> 00:05:14,470
1, 2, 3, then 4, then 5, then 6 etc..
77

78
00:05:14,710 --> 00:05:18,990
Now, the thing is, we're programmers, and this is a little bit too manual for us.
78

79
00:05:19,090 --> 00:05:22,240
And in life, whenever things get a little bit too tedious,
79

80
00:05:22,360 --> 00:05:25,050
my first thought is, I should make a function.
80

81
00:05:25,270 --> 00:05:30,640
Now that happens on a regular basis and sometimes I can and sometimes I can't.
81

82
00:05:30,910 --> 00:05:38,410
For example, loading up the washing machine, really tedious, blow drying long hair is really really tedious,
82

83
00:05:38,650 --> 00:05:44,760
to the point where I start thinking about making a drone that I could program to dry my hair,
83

84
00:05:44,770 --> 00:05:47,400
it just flies around me and dries my hair.
84

85
00:05:47,560 --> 00:05:51,470
Now, in the future, if you ever come across a picture of me with no hair,
85

86
00:05:51,490 --> 00:05:53,010
then you'll know what happened.
86

87
00:05:53,050 --> 00:05:59,740
So instead of writing output.push every single time and adding the next number on, let's create
87

88
00:05:59,770 --> 00:06:01,210
a function instead.
88

89
00:06:01,360 --> 00:06:09,370
So let's go into our Snippets inside our index.js, and let's create our output array here, and let's
89

90
00:06:09,370 --> 00:06:11,730
set it to an empty array.
90

91
00:06:11,740 --> 00:06:19,600
Now next I'm going to create a function called fizzBuzz, and this is going to have a console.log in
91

92
00:06:19,600 --> 00:06:25,310
it so that it will print out the value of the output every single time it's run.
92

93
00:06:25,580 --> 00:06:28,890
OK. So so far our function does absolutely nothing.
93

94
00:06:29,050 --> 00:06:34,510
Now here's the challenge. I want you to complete this code so that every single time you run the function
94

95
00:06:34,510 --> 00:06:40,560
fizzBuzz, it will add the next number in the sequence to the array called output.
95

96
00:06:40,630 --> 00:06:42,230
So write your code here,
96

97
00:06:42,460 --> 00:06:48,580
and once you've succeeded, you should be able to call the function fizzBuzz and it will print out the
97

98
00:06:48,640 --> 00:06:55,240
array, and every single time you run this code it will add the next number in the sequence. So you can
98

99
00:06:55,240 --> 00:07:00,760
do something like this where, every time you call fizzBuzz, it will keep going and adding new numbers
99

100
00:07:00,850 --> 00:07:03,840
into the array and printing it out into the console.
100

101
00:07:03,880 --> 00:07:07,950
So you'll need to think back about what we learned in this lesson about push and pop,
101

102
00:07:08,200 --> 00:07:13,330
and also think about how you can keep track of those numbers, and figuring out how you can add it to the
102

103
00:07:13,330 --> 00:07:14,030
array.
103

104
00:07:14,080 --> 00:07:17,470
So pause the video now and see if you can complete this challenge.
104

105
00:07:19,150 --> 00:07:19,540
All right.
105

106
00:07:19,540 --> 00:07:21,490
So how did that go?
106

107
00:07:21,760 --> 00:07:28,090
Well, the first problem we have is we need to add a number that increases by one every single time we
107

108
00:07:28,090 --> 00:07:29,190
run the function.
108

109
00:07:29,410 --> 00:07:33,150
So we need a variable to keep track of that number.
109

110
00:07:33,250 --> 00:07:42,580
So let's create a container, or a variable rather, called count, and let's set it to equal 1 in the beginning.
110

111
00:07:42,580 --> 00:07:50,590
Now what we can do is we can use our output.push in order to push the value of count onto the end
111

112
00:07:50,650 --> 00:07:52,330
of our array
112

113
00:07:52,390 --> 00:07:53,520
that's called output.
113

114
00:07:53,530 --> 00:07:59,190
So, at this point, if we run our code, the output array gets created as an empty array,
114

115
00:07:59,320 --> 00:08:05,030
and once we run this function fizzBuzz, then 1 will get added to the output array,
115

116
00:08:05,140 --> 00:08:07,900
so we will end up with an array with a single value
116

117
00:08:07,900 --> 00:08:12,150
that's just the number 1, because that's what we pushed onto it.
117

118
00:08:12,310 --> 00:08:18,370
But at the moment, no matter how many times I run this, it will keep adding 1 to the end of the array,
118

119
00:08:18,400 --> 00:08:20,010
which is not quite what we want.
119

120
00:08:20,110 --> 00:08:22,700
We want to increase the sequence of numbers.
120

121
00:08:22,750 --> 00:08:25,830
So in order to do that we have to increment count.
121

122
00:08:25,960 --> 00:08:31,720
And, you might remember from previous lessons, we'll have to do that by saying count equals count plus
122

123
00:08:31,720 --> 00:08:34,250
one, or more simply,
123

124
00:08:34,690 --> 00:08:36,930
we can just write count++.
124

125
00:08:36,940 --> 00:08:45,190
So now, if we run this snippet and I clear my console and let's run fizzBuzz, you can see that each time
125

126
00:08:45,250 --> 00:08:51,340
I run this function it will add the next number in the sequence to our array.
126

127
00:08:51,340 --> 00:08:54,480
So that is one of the solutions to this challenge.
127

128
00:08:54,490 --> 00:08:55,870
Now what about the next step?
128

129
00:08:55,870 --> 00:08:59,610
How do we get our code to, instead of putting 3 into our array,
129

130
00:08:59,620 --> 00:09:04,940
put the word "Fizz", and instead of putting 5 we want it to write "Buzz".
130

131
00:09:05,260 --> 00:09:12,580
Well, remember previously we learned about something called the modulo. And this allows us to check what
131

132
00:09:12,580 --> 00:09:14,290
the remainder is.
132

133
00:09:14,290 --> 00:09:24,970
So for example if we said 12 modulo 2 then it will divide 12 by 2 and it will print out the remainder
133

134
00:09:25,030 --> 00:09:30,200
which is 0, because 12 is fully divisible by 2. 12 divided by 2 equals 6
134

135
00:09:30,220 --> 00:09:31,850
and there is no remainder,
135

136
00:09:32,070 --> 00:09:37,360
whereas something like 12 modulo 5, then you will get a remainder.
136

137
00:09:37,360 --> 00:09:39,200
So 5 goes into 12 twice,
137

138
00:09:39,250 --> 00:09:43,090
which gets us up to 10, and then there's a remainder of 2.
138

139
00:09:43,300 --> 00:09:49,750
So a common way that programmers use the modulo is to check whether if a number is fully divisible
139

140
00:09:49,810 --> 00:09:50,850
by another number.
140

141
00:09:50,950 --> 00:09:58,780
So we can use the same concept in our code in order to check to see if the current value of count is
141

142
00:09:58,780 --> 00:10:00,600
divisible by 3.
142

143
00:10:00,760 --> 00:10:07,610
And when it is, then instead of pushing count, we're going to push "Fizz" into our output array.
143

144
00:10:07,900 --> 00:10:14,860
Now if count is divisible by 5 then we're going to push "Buzz" into our output array instead of the number
144

145
00:10:14,860 --> 00:10:15,520
5,
145

146
00:10:15,700 --> 00:10:22,510
and similarly for the case of FizzBuzz, when the numbers are both divisible by 3 and 5.
146

147
00:10:22,510 --> 00:10:23,400
Now here's the challenge.
147

148
00:10:23,410 --> 00:10:26,940
You should be able to call the function fizzBuzz in the console,
148

149
00:10:27,130 --> 00:10:33,760
and every time you do so it will push the word "Fizz" into the array instead of the number that was divisible
149

150
00:10:33,760 --> 00:10:40,010
by 3, and it will add the word "Buzz" into the array instead of the number that's divisible by 5.
150

151
00:10:40,330 --> 00:10:47,210
And if a number is divisible by both 3 and 5 then it will add the word "FizzBuzz" into your array.
151

152
00:10:47,260 --> 00:10:53,140
And you can keep going calling fizzBuzz each time to get the next value pushed onto the array.
152

153
00:10:53,200 --> 00:10:59,050
So, using what you've learned about arrays, and some of the things that we've learnt in previous lessons,
153

154
00:10:59,380 --> 00:11:04,740
pause the video now and see if you can complete this challenge.
154

155
00:11:04,760 --> 00:11:05,120
All right.
155

156
00:11:05,120 --> 00:11:07,940
So let's break down this problem.
156

157
00:11:07,940 --> 00:11:14,670
The first thing that we need to do is to check if the value of count is divisible by three.
157

158
00:11:14,870 --> 00:11:21,610
So to do that we can use the if statement. So we can say if count modulo 3,
158

159
00:11:21,710 --> 00:11:27,630
so the remainder of count divided by 3 is equal to 0,
159

160
00:11:27,650 --> 00:11:31,450
then in that case count is divisible by three,
160

161
00:11:31,580 --> 00:11:40,140
and instead of pushing count into the output, we should push the word "Fizz". But otherwise,
161

162
00:11:40,250 --> 00:11:49,190
or else, then we should push count, which is the number, and then we increase count by 1 and we print out
162

163
00:11:49,190 --> 00:11:50,930
the value of output.
163

164
00:11:50,930 --> 00:11:55,170
So now let's run our snippet and call fizzBuzz.
164

165
00:11:55,190 --> 00:12:04,580
So we start off with 1, 2, and then we get Fizz because three is divisible by three, 4, 5, six, six
165

166
00:12:04,580 --> 00:12:05,810
is divisible by three,
166

167
00:12:05,810 --> 00:12:07,520
so we also get Fizz.
167

168
00:12:07,550 --> 00:12:09,480
So our code is working.
168

169
00:12:09,500 --> 00:12:16,100
All right so now let's address the next problem, Buzz. How do we take into account when our number is divisible
169

170
00:12:16,100 --> 00:12:18,920
by five that it should print "Buzz"?
170

171
00:12:19,250 --> 00:12:27,110
Well if, instead of having an else straight away, if we had an else if here, and we checked to see if count
171

172
00:12:27,200 --> 00:12:32,560
is divisible, or modulo, 5 and that equals 0,
172

173
00:12:32,840 --> 00:12:37,740
then in that case at this moment in time count is divisible by five,
173

174
00:12:37,910 --> 00:12:49,460
so instead of pushing count we will push "Buzz". So now let's run our snippet, clear our console, and call 
174

175
00:12:49,460 --> 00:12:49,940
fizzBuzz.
175

176
00:12:49,940 --> 00:12:57,040
So 1, 2, three is Fizz, 4, five is Buzz.
176

177
00:12:57,090 --> 00:13:02,010
So our code is now working for Fizz and Buzz.
177

178
00:13:02,070 --> 00:13:09,720
Now there's just one last thing that it's not complying with, which is what happens when the current number
178

179
00:13:09,720 --> 00:13:12,710
is divisible by both 3 and 5.
179

180
00:13:12,780 --> 00:13:20,970
As you can see at this point the number is 15 and it's only printing Fizz because the code runs from
180

181
00:13:20,970 --> 00:13:28,350
top to bottom, and the first thing that it'll encounter is this if statement, which says that if count is divisible
181

182
00:13:28,350 --> 00:13:36,180
by 3 push "Fizz". And once that's done it skips all the other else and else if statements, and it doesn't
182

183
00:13:36,180 --> 00:13:41,700
even check to see whether it's also divisible by 5.
183

184
00:13:41,730 --> 00:13:49,680
So there's a few ways of addressing this but the easiest way is to first check if count is divisible
184

185
00:13:49,680 --> 00:13:50,870
by three
185

186
00:13:51,180 --> 00:13:56,210
and at the same time count is divisible by five.
186

187
00:13:56,430 --> 00:14:03,990
And in this case we can push "FizzBuzz" onto the output. And then we have
187

188
00:14:03,990 --> 00:14:12,240
else if it's only divisible by three, push "Fizz", else if it's only divisible by five then push "Buzz",
188

189
00:14:12,720 --> 00:14:20,530
and in all other scenarios, or else, then just push the number value of count on to our array.
189

190
00:14:20,760 --> 00:14:31,180
So now if we run our code and call fizzBuzz, then you can see that it works for both divisible by 5
190

191
00:14:31,270 --> 00:14:34,750
and 3 as well as when it's divisible by both numbers.
191

192
00:14:34,750 --> 00:14:42,010
So the order of your if statements matter a huge deal, and it's almost like a water flow, right?
192

193
00:14:42,130 --> 00:14:49,150
The water, or the code, will flow into each of the conditions, and once it's found a condition that's true,
193

194
00:14:49,270 --> 00:14:52,060
it will skip every other avenue.
194

195
00:14:52,210 --> 00:14:56,420
So it's important to think about how you order your if and else if statements.
195

196
00:14:56,440 --> 00:15:01,160
Now there's a few other ways of solving this problem and it doesn't matter if you chose
196

197
00:15:01,180 --> 00:15:03,640
my way of solving it or another way.
197

198
00:15:03,640 --> 00:15:09,160
The whole point is getting you to think about how you can use conditionals and arrays to structure a
198

199
00:15:09,160 --> 00:15:10,080
sequence.
199

200
00:15:10,090 --> 00:15:17,050
Now, in the next lesson, we'll look at taking this code even further and making it even more automated,
200

201
00:15:17,320 --> 00:15:21,170
because remember, what are we? We're programmers. And what have we got?
201

202
00:15:21,190 --> 00:15:27,550
We've got all the codes. And just to take that point a little bit further, as extra reading you might
202

203
00:15:27,550 --> 00:15:31,470
be interested in the story of a Russian programmer.
203

204
00:15:31,480 --> 00:15:37,780
Now if you speak or read Russian then you will be able to read the story in its original form, and if
204

205
00:15:37,780 --> 00:15:43,010
you don't, then there's a link to what somebody has translated into English.
205

206
00:15:43,030 --> 00:15:50,020
It's a really funny story of an engineer who basically automated his entire work life using code, and
206

207
00:15:50,020 --> 00:15:54,760
it fits in with our current theme of trying to automate everything that we do using code.
207

208
00:15:54,760 --> 00:15:57,310
So enjoy and I'll see you on the next lesson.