WEBVTT 0 00:00.570 --> 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 00:06.930 --> 00:12.070 that you have coded up and you're ready to get a job as a web developer. 2 00:12.090 --> 00:18.060 Now one of the most common questions that you're going to encounter on any programming interview is something 3 00:18.060 --> 00:23.210 called FizzBuzz, and it's a really simple problem and this is usually how they would define it. 4 00:23.250 --> 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 00:29.690 --> 00:35.760 "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both 6 00:35.760 --> 00:40.560 three and five, for example fifteen, then print "FizzBuzz" instead of the number. 7 00:41.040 --> 00:46.950 So it's pretty simple, but it's a really easy way of seeing how you solve problems and demonstrating 8 00:46.980 --> 00:48.890 a candidate's programming skills. 9 00:48.990 --> 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 00:56.370 --> 00:58.310 why can't programmers program. 11 00:58.350 --> 01:03.510 And the interesting thing that they talk about is what seems to be common knowledge amongst programming 12 01:03.510 --> 01:08.820 recruiters, and the fact of the matter is that out of 200 applicants there's probably only one person 13 01:08.820 --> 01:10.450 who can actually code. 14 01:10.650 --> 01:12.970 And this is a really strange phenomenon. 15 01:13.000 --> 01:17.640 Part of the reason is down to the fact that completing computer science degrees doesn't necessarily 16 01:17.640 --> 01:24.630 enable people to code, and a lot of people will graduate from a computer science degree and they might 17 01:24.630 --> 01:30.330 know how, say, compilers work or, you know, some aspects of computer history, but they might not actually 18 01:30.330 --> 01:33.450 know exactly how to write good code. 19 01:33.480 --> 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 01:39.300 --> 01:41.650 involve programming and software development, 21 01:41.940 --> 01:47.610 and yet the university degree that has the highest unemployment rate happens to be computer science, 22 01:48.000 --> 01:50.430 which is really really strange. 23 01:50.460 --> 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 01:56.790 --> 01:59.540 we're going to use it to learn all about arrays 25 01:59.550 --> 02:01.270 but on a slightly deeper level. 26 02:01.320 --> 02:08.640 So let's try and be better than 199 of programming interviewees, and let's look at this FizzBuzz problem 27 02:08.910 --> 02:11.250 and use it to learn more about arrays. 28 02:11.250 --> 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 02:18.810 --> 02:23.230 thought was fun, but that really depends on your definition of fun. 30 02:23.250 --> 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 02:30.630 --> 02:31.300 in sequence. 32 02:31.300 --> 02:33.090 So 1, 2, etc.. 33 02:33.330 --> 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 02:39.660 --> 02:40.550 of three. 35 02:40.620 --> 02:44.620 And if it's divisible by five you have to shout Buzz instead of five. 36 02:44.880 --> 02:49.380 And if your number is divisible by both then you have an even harder problem because you have to shout 37 02:49.380 --> 02:50.490 FizzBuzz. 38 02:50.490 --> 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 02:56.520 --> 02:57.740 who can play FizzBuzz. 40 02:57.870 --> 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 03:03.510 --> 03:04.460 from 1? 42 03:04.470 --> 03:08.610 Clearly you can tell that, you know, these children are not going to be programmers because they start 43 03:08.610 --> 03:11.160 counting from 1 rather than 0. 44 03:11.160 --> 03:12.330 But this is how the game works 45 03:12.330 --> 03:13.530 so let's do that. 46 03:13.530 --> 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 03:19.200 --> 03:19.950 run the code, 48 03:19.980 --> 03:21.780 the next number gets called out. 49 03:21.870 --> 03:23.970 So let's create a new array. 50 03:24.120 --> 03:25.930 So let's create a new array, 51 03:26.020 --> 03:29.710 and let's call it output. And we're going to set it to an empty array. 52 03:29.760 --> 03:30.730 Now next, 53 03:30.750 --> 03:34.600 now we can either create a new array by giving it values to begin with, 54 03:34.620 --> 03:38.790 for example this is an array that contains 1, 2, 3, or 55 03:38.880 --> 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 03:46.830 --> 03:49.710 array. So you can write output.push, 57 03:50.010 --> 03:55.170 and inside the parentheses you can put whatever it is that you want to push onto the array. 58 03:55.200 --> 03:57.130 So for example let's push number 1. 59 03:57.210 --> 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 04:04.440 --> 04:07.130 keep doing this output.push. 61 04:07.380 --> 04:09.610 Let's add 2 to this array. 62 04:09.780 --> 04:15.170 And now output is an array with two values that is 1 and 2. 63 04:15.270 --> 04:20.250 Now the important thing to remember about push is that it always pushes the item that you have in the 64 04:20.250 --> 04:23.000 parentheses to the end of the array. 65 04:23.010 --> 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 04:28.680 --> 04:33.570 And this is a really easy way of adding new items into your array as needed, 67 04:33.570 --> 04:40.380 so in our case adding first 1, then 2, then 3, then 4, etc.. And a related function is something 68 04:40.380 --> 04:41.200 called pop. 69 04:41.220 --> 04:46.650 So you can pop items off your array by using the name of the array.pop. 70 04:46.650 --> 04:48.770 So in our case our array is called eggs. 71 04:48.930 --> 04:50.450 So if we say eggs.pop, 72 04:50.550 --> 04:55.620 then it will take the last item in the array and it will remove it from the array. 73 04:55.620 --> 05:01.360 So what we've seen is that we can basically keep saying output.push, and, each time we run this, 74 05:01.430 --> 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 05:09.010 --> 05:10.520 our sequence of numbers, right? 76 05:10.520 --> 05:14.470 1, 2, 3, then 4, then 5, then 6 etc.. 77 05:14.710 --> 05:18.990 Now, the thing is, we're programmers, and this is a little bit too manual for us. 78 05:19.090 --> 05:22.240 And in life, whenever things get a little bit too tedious, 79 05:22.360 --> 05:25.050 my first thought is, I should make a function. 80 05:25.270 --> 05:30.640 Now that happens on a regular basis and sometimes I can and sometimes I can't. 81 05:30.910 --> 05:38.410 For example, loading up the washing machine, really tedious, blow drying long hair is really really tedious, 82 05:38.650 --> 05:44.760 to the point where I start thinking about making a drone that I could program to dry my hair, 83 05:44.770 --> 05:47.400 it just flies around me and dries my hair. 84 05:47.560 --> 05:51.470 Now, in the future, if you ever come across a picture of me with no hair, 85 05:51.490 --> 05:53.010 then you'll know what happened. 86 05:53.050 --> 05:59.740 So instead of writing output.push every single time and adding the next number on, let's create 87 05:59.770 --> 06:01.210 a function instead. 88 06:01.360 --> 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 06:09.370 --> 06:11.730 set it to an empty array. 90 06:11.740 --> 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 06:19.600 --> 06:25.310 it so that it will print out the value of the output every single time it's run. 92 06:25.580 --> 06:28.890 OK. So so far our function does absolutely nothing. 93 06:29.050 --> 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 06:34.510 --> 06:40.560 fizzBuzz, it will add the next number in the sequence to the array called output. 95 06:40.630 --> 06:42.230 So write your code here, 96 06:42.460 --> 06:48.580 and once you've succeeded, you should be able to call the function fizzBuzz and it will print out the 97 06:48.640 --> 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 06:55.240 --> 07:00.760 do something like this where, every time you call fizzBuzz, it will keep going and adding new numbers 99 07:00.850 --> 07:03.840 into the array and printing it out into the console. 100 07:03.880 --> 07:07.950 So you'll need to think back about what we learned in this lesson about push and pop, 101 07:08.200 --> 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 07:13.330 --> 07:14.030 array. 103 07:14.080 --> 07:17.470 So pause the video now and see if you can complete this challenge. 104 07:19.150 --> 07:19.540 All right. 105 07:19.540 --> 07:21.490 So how did that go? 106 07:21.760 --> 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 07:28.090 --> 07:29.190 run the function. 108 07:29.410 --> 07:33.150 So we need a variable to keep track of that number. 109 07:33.250 --> 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 07:42.580 --> 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 07:50.650 --> 07:52.330 of our array 112 07:52.390 --> 07:53.520 that's called output. 113 07:53.530 --> 07:59.190 So, at this point, if we run our code, the output array gets created as an empty array, 114 07:59.320 --> 08:05.030 and once we run this function fizzBuzz, then 1 will get added to the output array, 115 08:05.140 --> 08:07.900 so we will end up with an array with a single value 116 08:07.900 --> 08:12.150 that's just the number 1, because that's what we pushed onto it. 117 08:12.310 --> 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 08:18.400 --> 08:20.010 which is not quite what we want. 119 08:20.110 --> 08:22.700 We want to increase the sequence of numbers. 120 08:22.750 --> 08:25.830 So in order to do that we have to increment count. 121 08:25.960 --> 08:31.720 And, you might remember from previous lessons, we'll have to do that by saying count equals count plus 122 08:31.720 --> 08:34.250 one, or more simply, 123 08:34.690 --> 08:36.930 we can just write count++. 124 08:36.940 --> 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 08:45.250 --> 08:51.340 I run this function it will add the next number in the sequence to our array. 126 08:51.340 --> 08:54.480 So that is one of the solutions to this challenge. 127 08:54.490 --> 08:55.870 Now what about the next step? 128 08:55.870 --> 08:59.610 How do we get our code to, instead of putting 3 into our array, 129 08:59.620 --> 09:04.940 put the word "Fizz", and instead of putting 5 we want it to write "Buzz". 130 09:05.260 --> 09:12.580 Well, remember previously we learned about something called the modulo. And this allows us to check what 131 09:12.580 --> 09:14.290 the remainder is. 132 09:14.290 --> 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 09:25.030 --> 09:30.200 which is 0, because 12 is fully divisible by 2. 12 divided by 2 equals 6 134 09:30.220 --> 09:31.850 and there is no remainder, 135 09:32.070 --> 09:37.360 whereas something like 12 modulo 5, then you will get a remainder. 136 09:37.360 --> 09:39.200 So 5 goes into 12 twice, 137 09:39.250 --> 09:43.090 which gets us up to 10, and then there's a remainder of 2. 138 09:43.300 --> 09:49.750 So a common way that programmers use the modulo is to check whether if a number is fully divisible 139 09:49.810 --> 09:50.850 by another number. 140 09:50.950 --> 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 09:58.780 --> 10:00.600 divisible by 3. 142 10:00.760 --> 10:07.610 And when it is, then instead of pushing count, we're going to push "Fizz" into our output array. 143 10:07.900 --> 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 10:14.860 --> 10:15.520 5, 145 10:15.700 --> 10:22.510 and similarly for the case of FizzBuzz, when the numbers are both divisible by 3 and 5. 146 10:22.510 --> 10:23.400 Now here's the challenge. 147 10:23.410 --> 10:26.940 You should be able to call the function fizzBuzz in the console, 148 10:27.130 --> 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 10:33.760 --> 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 10:40.330 --> 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 10:47.260 --> 10:53.140 And you can keep going calling fizzBuzz each time to get the next value pushed onto the array. 152 10:53.200 --> 10:59.050 So, using what you've learned about arrays, and some of the things that we've learnt in previous lessons, 153 10:59.380 --> 11:04.740 pause the video now and see if you can complete this challenge. 154 11:04.760 --> 11:05.120 All right. 155 11:05.120 --> 11:07.940 So let's break down this problem. 156 11:07.940 --> 11:14.670 The first thing that we need to do is to check if the value of count is divisible by three. 157 11:14.870 --> 11:21.610 So to do that we can use the if statement. So we can say if count modulo 3, 158 11:21.710 --> 11:27.630 so the remainder of count divided by 3 is equal to 0, 159 11:27.650 --> 11:31.450 then in that case count is divisible by three, 160 11:31.580 --> 11:40.140 and instead of pushing count into the output, we should push the word "Fizz". But otherwise, 161 11:40.250 --> 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 11:49.190 --> 11:50.930 the value of output. 163 11:50.930 --> 11:55.170 So now let's run our snippet and call fizzBuzz. 164 11:55.190 --> 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 12:04.580 --> 12:05.810 is divisible by three, 166 12:05.810 --> 12:07.520 so we also get Fizz. 167 12:07.550 --> 12:09.480 So our code is working. 168 12:09.500 --> 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 12:16.100 --> 12:18.920 by five that it should print "Buzz"? 170 12:19.250 --> 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 12:27.200 --> 12:32.560 is divisible, or modulo, 5 and that equals 0, 172 12:32.840 --> 12:37.740 then in that case at this moment in time count is divisible by five, 173 12:37.910 --> 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 12:49.460 --> 12:49.940 fizzBuzz. 175 12:49.940 --> 12:57.040 So 1, 2, three is Fizz, 4, five is Buzz. 176 12:57.090 --> 13:02.010 So our code is now working for Fizz and Buzz. 177 13:02.070 --> 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 13:09.720 --> 13:12.710 is divisible by both 3 and 5. 179 13:12.780 --> 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 13:20.970 --> 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 13:28.350 --> 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 13:36.180 --> 13:41.700 even check to see whether it's also divisible by 5. 183 13:41.730 --> 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 13:49.680 --> 13:50.870 by three 185 13:51.180 --> 13:56.210 and at the same time count is divisible by five. 186 13:56.430 --> 14:03.990 And in this case we can push "FizzBuzz" onto the output. And then we have 187 14:03.990 --> 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 14:12.720 --> 14:20.530 and in all other scenarios, or else, then just push the number value of count on to our array. 189 14:20.760 --> 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 14:31.270 --> 14:34.750 and 3 as well as when it's divisible by both numbers. 191 14:34.750 --> 14:42.010 So the order of your if statements matter a huge deal, and it's almost like a water flow, right? 192 14:42.130 --> 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 14:49.270 --> 14:52.060 it will skip every other avenue. 194 14:52.210 --> 14:56.420 So it's important to think about how you order your if and else if statements. 195 14:56.440 --> 15:01.160 Now there's a few other ways of solving this problem and it doesn't matter if you chose 196 15:01.180 --> 15:03.640 my way of solving it or another way. 197 15:03.640 --> 15:09.160 The whole point is getting you to think about how you can use conditionals and arrays to structure a 198 15:09.160 --> 15:10.080 sequence. 199 15:10.090 --> 15:17.050 Now, in the next lesson, we'll look at taking this code even further and making it even more automated, 200 15:17.320 --> 15:21.170 because remember, what are we? We're programmers. And what have we got? 201 15:21.190 --> 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 15:27.550 --> 15:31.470 be interested in the story of a Russian programmer. 203 15:31.480 --> 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 15:37.780 --> 15:43.010 you don't, then there's a link to what somebody has translated into English. 205 15:43.030 --> 15:50.020 It's a really funny story of an engineer who basically automated his entire work life using code, and 206 15:50.020 --> 15:54.760 it fits in with our current theme of trying to automate everything that we do using code. 207 15:54.760 --> 15:57.310 So enjoy and I'll see you on the next lesson.