WEBVTT 0 00:00.720 --> 00:05.610 OK. So, truth be told, our function is still kind of terrible. 1 00:05.670 --> 00:09.410 It requires us to run fizzBuzz every time. 2 00:09.410 --> 00:13.710 What if we wanted to print out the sequence for the first 100 numbers? Then 3 00:13.760 --> 00:17.360 do we have to sit there and write fizzBuzz a hundred times? 4 00:17.380 --> 00:18.900 No, no, no, of course not. 5 00:18.900 --> 00:25.700 We're programmers, remember. What if we can get the computer to run our code 100 times by itself? 6 00:25.950 --> 00:32.250 Well this is where loops come in. And the simplest type of loop are what are called while loops. 7 00:32.250 --> 00:38.880 And the way the while loops work is that, in between the parentheses, there is a statement, and while that 8 00:38.880 --> 00:45.960 statement is true, then the code inside the curly braces will run again and again and again and again, 9 00:46.320 --> 00:48.580 until that statement is no longer true. 10 00:48.630 --> 00:51.330 So let's take a look at this example. 11 00:51.330 --> 00:53.150 We create a variable called i, 12 00:53.250 --> 00:55.010 and we set it to equal 1. 13 00:55.020 --> 00:57.710 So at this point i is equal to 1. 14 00:57.750 --> 01:00.130 And this is stored inside the computer's memory, 15 01:00.330 --> 01:03.440 so that's the grey area, something that we don't get to see, 16 01:03.480 --> 01:06.360 but the computer is holding that data for us. 17 01:06.360 --> 01:08.650 So i currently equals 1. 18 01:08.670 --> 01:14.670 Now the code goes to the while loop, and it will evaluate the statement in between the parentheses. 19 01:14.670 --> 01:17.990 So is i currently less than 2? 20 01:18.030 --> 01:20.230 Well, 1 is definitely less than 2. 21 01:20.250 --> 01:21.590 So this is true. 22 01:21.810 --> 01:27.870 And if the statement is true then that means that the computer will execute the code in between the 23 01:27.870 --> 01:33.420 curly braces, which currently just tells it to console.log the value of i, which of course as we know 24 01:33.510 --> 01:35.160 is equal to 1. 25 01:35.160 --> 01:43.170 Now the next line of code inside this while loop increments i, and so i is now equal to 2. 26 01:43.860 --> 01:50.850 So now, after this loop is completed, then the code jumps back to the beginning of the while loop and 27 01:50.850 --> 01:53.940 it evaluates that condition again. 28 01:53.970 --> 01:56.620 So is i still less than 2? 29 01:56.630 --> 01:59.560 Well, 2 is not less than 2. 2 is equal to 2, 30 01:59.580 --> 01:59.880 right? 31 01:59.880 --> 02:06.870 So this is now false, and that means that this while loop will stop, and it will skip the loop and go to 32 02:06.870 --> 02:08.460 the next line of code below. 33 02:08.550 --> 02:11.270 So this is how a while loop works. 34 02:11.280 --> 02:19.500 So if we wanted to modify our fizzBuzz function in order to get it to run automatically using the while 35 02:19.500 --> 02:28.440 loop, then we can simply add a while loop here, and the condition that we're going to check is while count 36 02:28.890 --> 02:32.330 is less than or equal to 100, 37 02:32.400 --> 02:37.440 then we will carry out the if checks every single time. 38 02:37.440 --> 02:48.030 So now if I run our code and I run fizzBuzz, then you can see that the while loop runs a 100 times, adding 39 02:48.030 --> 02:57.150 100 values to our array, and it prints out the exact sequence that we would get if we played this game 40 02:57.200 --> 03:02.680 a 100 times, or if previously we called the function fizzBuzz a 100 times. 41 03:02.790 --> 03:07.020 So the order of events starts off with count being equal to 1, 42 03:07.140 --> 03:12.110 and when we first hit the while loop, 1 is obviously less than 100, 43 03:12.150 --> 03:20.370 so everything inside the while loop will be executed. And the first thing we do is we check to see if 44 03:20.370 --> 03:24.350 count is divisible by 3 and if count is divisible by 5. 45 03:24.360 --> 03:28.010 If so then we add fizzBuzz to our array, 46 03:28.320 --> 03:32.460 otherwise if it's only divisible by 3 we add a “Fizz”, 47 03:32.670 --> 03:35.340 and if it's only divisible by 5 we add “Buzz”, 48 03:35.550 --> 03:43.580 otherwise we just add the number of count. And once we've checked all of these then we increment count. 49 03:43.590 --> 03:45.680 So it's now 2. 50 03:45.910 --> 03:48.910 And we get to the end of the while loop. 51 03:48.960 --> 03:54.240 As you can see when I click on this closing brace there's a little line under the opening brace to show 52 03:54.240 --> 03:59.080 you the entire block of code that is inside the while loop. 53 03:59.100 --> 04:05.460 So once it gets to the bottom here and it goes back up to the top and checks again to see if this statement 54 04:05.520 --> 04:15.070 is still true, is count still less than 100. So count is now 2. 2 is still less than 100. 55 04:15.130 --> 04:22.860 And it goes on and on and on for 100 times until count is now 101. 56 04:23.050 --> 04:27.400 So when it's 101 then this condition is no longer true. 57 04:27.490 --> 04:31.350 Count 101 is not less than or equal to 100, 58 04:31.450 --> 04:38.890 so it skips this while loop and continues to the next line, which happens to be line 22, where we get 59 04:38.950 --> 04:42.070 our entire array printed out in the console. 60 04:42.250 --> 04:47.860 So the problem with while loops is that it's actually quite error prone, because it will continue to run 61 04:47.980 --> 04:52.290 infinitely until the statement inside here becomes false. 62 04:52.510 --> 04:58.900 So, if you made a mistake, say for example if you forgot to increase the count variable, so it stays as 63 04:58.990 --> 05:04.360 1 and it never gets increased, then this statement will always be true. 64 05:04.360 --> 05:07.500 1 is always going to be less than 100, 65 05:07.600 --> 05:13.940 and if we don't change it's value inside the while loop, then this loop will run until eternity. 66 05:14.050 --> 05:20.590 And what that means in practice, if you dare try it, is that your tab will simply hang. So I'll show you 67 05:20.590 --> 05:21.250 what happens. 68 05:21.250 --> 05:22.780 Don't be afraid of trying things, 69 05:22.780 --> 05:27.190 even if you know that it's bad, because you'll recognize it the next time you accidentally make this 70 05:27.190 --> 05:28.120 mistake. 71 05:28.120 --> 05:38.710 So if I hit run now, and I call fizzBuzz, you can see that my tab will actually crash, and you can see 72 05:38.710 --> 05:45.100 that DevTools was disconnected, and you can see that Chrome is actually saying can't open page, 73 05:45.100 --> 05:45.790 try the following. 74 05:45.790 --> 05:48.330 So basically this whole tab has just now crashed. 75 05:48.340 --> 05:50.930 This gives you a little bit of a hint of what's going on. 76 05:50.950 --> 05:54.960 But essentially this is what you would call an infinite loop. 77 05:54.970 --> 06:00.200 Guess what the address of the Apple Campus is. Yep, it's One Infinite Loop. 78 06:00.220 --> 06:03.460 They decided to call the road on their campus Infinite Loop. 79 06:03.460 --> 06:07.780 So Apple Campus is actually on the building that's at the address One Infinite Loop. 80 06:07.780 --> 06:14.260 And this is a little bit of an insider programmer humor. That refers to exactly what we just experienced, 81 06:14.560 --> 06:19.070 the infinite loop, where your computer will carry on until eternity, 82 06:19.180 --> 06:20.860 and instead crashes your code. 83 06:21.040 --> 06:21.340 All right. 84 06:21.340 --> 06:26.380 Just before I show you the challenge for this lesson I want to tell you a joke. 85 06:26.440 --> 06:34.380 So a programmers wife tells him, “While you're at the store, get some milk”, and he never comes back again. 86 06:34.390 --> 06:34.740 All right. 87 06:34.750 --> 06:41.770 So for this challenge I want you to use the while loop and print out in the console the lyrics of the 88 06:41.770 --> 06:43.890 song 99 bottles of beer. 89 06:44.080 --> 06:46.210 So if you never heard of the song it goes something like this. 90 06:46.250 --> 06:48.580 99 bottles of beer on the wall, 99 bottles of beer. 91 06:48.580 --> 06:54.010 Take one down and pass it around, 98 bottles of beer on the wall. And you can see that the number 92 06:54.010 --> 06:59.980 goes down and down and down until finally we get to no more bottles of beer on the wall, no more bottles 93 06:59.980 --> 07:00.540 of beer. 94 07:00.730 --> 07:01.960 Go to the store and buy some more, 95 07:01.960 --> 07:08.050 99 bottles of beer on the wall. So you can see that this is a repeated pattern where in each line the 96 07:08.050 --> 07:10.550 number decreases by 1. 97 07:10.570 --> 07:16.970 So this is a perfect opportunity to practice what you have just learned using the while loop. 98 07:16.990 --> 07:23.140 So I want you to create a function inside Chrome Snippets, and you can call it anything you want, 99 07:23.140 --> 07:28.370 for example I've called mine beer. And I want you to be able to call it inside the console. 100 07:28.660 --> 07:34.750 And when you do it should print out all of the lyrics of ninety nine bottles of beer on the wall. 101 07:34.780 --> 07:41.320 Now, I hope that you're not going to spend your time writing it out a single console.log at a time, but 102 07:41.320 --> 07:45.110 instead you'll use the while loop to do this for you. 103 07:45.130 --> 07:49.090 So pause the video now and try and give this challenge a go. 104 07:49.210 --> 07:51.900 I'll see you on the next lesson where we go through the solution.