0
1
00:00:00,720 --> 00:00:05,610
OK. So, truth be told, our function is still kind of terrible.
1

2
00:00:05,670 --> 00:00:09,410
It requires us to run fizzBuzz every time.
2

3
00:00:09,410 --> 00:00:13,710
What if we wanted to print out the sequence for the first 100 numbers? Then
3

4
00:00:13,760 --> 00:00:17,360
do we have to sit there and write fizzBuzz a hundred times?
4

5
00:00:17,380 --> 00:00:18,900
No, no, no, of course not.
5

6
00:00:18,900 --> 00:00:25,700
We're programmers, remember. What if we can get the computer to run our code 100 times by itself?
6

7
00:00:25,950 --> 00:00:32,250
Well this is where loops come in. And the simplest type of loop are what are called while loops.
7

8
00:00:32,250 --> 00:00:38,880
And the way the while loops work is that, in between the parentheses, there is a statement, and while that
8

9
00:00:38,880 --> 00:00:45,960
statement is true, then the code inside the curly braces will run again and again and again and again,
9

10
00:00:46,320 --> 00:00:48,580
until that statement is no longer true.
10

11
00:00:48,630 --> 00:00:51,330
So let's take a look at this example.
11

12
00:00:51,330 --> 00:00:53,150
We create a variable called i,
12

13
00:00:53,250 --> 00:00:55,010
and we set it to equal 1.
13

14
00:00:55,020 --> 00:00:57,710
So at this point i is equal to 1.
14

15
00:00:57,750 --> 00:01:00,130
And this is stored inside the computer's memory,
15

16
00:01:00,330 --> 00:01:03,440
so that's the grey area, something that we don't get to see,
16

17
00:01:03,480 --> 00:01:06,360
but the computer is holding that data for us.
17

18
00:01:06,360 --> 00:01:08,650
So i currently equals 1.
18

19
00:01:08,670 --> 00:01:14,670
Now the code goes to the while loop, and it will evaluate the statement in between the parentheses.
19

20
00:01:14,670 --> 00:01:17,990
So is i currently less than 2?
20

21
00:01:18,030 --> 00:01:20,230
Well, 1 is definitely less than 2.
21

22
00:01:20,250 --> 00:01:21,590
So this is true.
22

23
00:01:21,810 --> 00:01:27,870
And if the statement is true then that means that the computer will execute the code in between the
23

24
00:01:27,870 --> 00:01:33,420
curly braces, which currently just tells it to console.log the value of i, which of course as we know
24

25
00:01:33,510 --> 00:01:35,160
is equal to 1.
25

26
00:01:35,160 --> 00:01:43,170
Now the next line of code inside this while loop increments i, and so i is now equal to 2.
26

27
00:01:43,860 --> 00:01:50,850
So now, after this loop is completed, then the code jumps back to the beginning of the while loop and
27

28
00:01:50,850 --> 00:01:53,940
it evaluates that condition again.
28

29
00:01:53,970 --> 00:01:56,620
So is i still less than 2?
29

30
00:01:56,630 --> 00:01:59,560
Well, 2 is not less than 2. 2 is equal to 2,
30

31
00:01:59,580 --> 00:01:59,880
right?
31

32
00:01:59,880 --> 00: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

33
00:02:06,870 --> 00:02:08,460
the next line of code below.
33

34
00:02:08,550 --> 00:02:11,270
So this is how a while loop works.
34

35
00:02:11,280 --> 00:02:19,500
So if we wanted to modify our fizzBuzz function in order to get it to run automatically using the while
35

36
00:02:19,500 --> 00: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

37
00:02:28,890 --> 00:02:32,330
is less than or equal to 100,
37

38
00:02:32,400 --> 00:02:37,440
then we will carry out the if checks every single time.
38

39
00:02:37,440 --> 00: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

40
00:02:48,030 --> 00: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

41
00:02:57,200 --> 00:03:02,680
a 100 times, or if previously we called the function fizzBuzz a 100 times.
41

42
00:03:02,790 --> 00:03:07,020
So the order of events starts off with count being equal to 1,
42

43
00:03:07,140 --> 00:03:12,110
and when we first hit the while loop, 1 is obviously less than 100,
43

44
00:03:12,150 --> 00: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

45
00:03:20,370 --> 00:03:24,350
count is divisible by 3 and if count is divisible by 5.
45

46
00:03:24,360 --> 00:03:28,010
If so then we add fizzBuzz to our array,
46

47
00:03:28,320 --> 00:03:32,460
otherwise if it's only divisible by 3 we add a “Fizz”,
47

48
00:03:32,670 --> 00:03:35,340
and if it's only divisible by 5 we add “Buzz”,
48

49
00:03:35,550 --> 00:03:43,580
otherwise we just add the number of count. And once we've checked all of these then we increment count.
49

50
00:03:43,590 --> 00:03:45,680
So it's now 2.
50

51
00:03:45,910 --> 00:03:48,910
And we get to the end of the while loop.
51

52
00:03:48,960 --> 00: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

53
00:03:54,240 --> 00:03:59,080
you the entire block of code that is inside the while loop.
53

54
00:03:59,100 --> 00: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

55
00:04:05,520 --> 00:04:15,070
is still true, is count still less than 100. So count is now 2. 2 is still less than 100.
55

56
00:04:15,130 --> 00:04:22,860
And it goes on and on and on for 100 times until count is now 101.
56

57
00:04:23,050 --> 00:04:27,400
So when it's 101 then this condition is no longer true.
57

58
00:04:27,490 --> 00:04:31,350
Count 101 is not less than or equal to 100,
58

59
00:04:31,450 --> 00: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

60
00:04:38,950 --> 00:04:42,070
our entire array printed out in the console.
60

61
00:04:42,250 --> 00:04:47,860
So the problem with while loops is that it's actually quite error prone, because it will continue to run
61

62
00:04:47,980 --> 00:04:52,290
infinitely until the statement inside here becomes false.
62

63
00:04:52,510 --> 00: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

64
00:04:58,990 --> 00:05:04,360
1 and it never gets increased, then this statement will always be true.
64

65
00:05:04,360 --> 00:05:07,500
1 is always going to be less than 100,
65

66
00:05:07,600 --> 00:05:13,940
and if we don't change it's value inside the while loop, then this loop will run until eternity.
66

67
00:05:14,050 --> 00: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

68
00:05:20,590 --> 00:05:21,250
what happens.
68

69
00:05:21,250 --> 00:05:22,780
Don't be afraid of trying things,
69

70
00:05:22,780 --> 00:05:27,190
even if you know that it's bad, because you'll recognize it the next time you accidentally make this
70

71
00:05:27,190 --> 00:05:28,120
mistake.
71

72
00:05:28,120 --> 00: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

73
00:05:38,710 --> 00:05:45,100
that DevTools was disconnected, and you can see that Chrome is actually saying can't open page,
73

74
00:05:45,100 --> 00:05:45,790
try the following.
74

75
00:05:45,790 --> 00:05:48,330
So basically this whole tab has just now crashed.
75

76
00:05:48,340 --> 00:05:50,930
This gives you a little bit of a hint of what's going on.
76

77
00:05:50,950 --> 00:05:54,960
But essentially this is what you would call an infinite loop.
77

78
00:05:54,970 --> 00:06:00,200
Guess what the address of the Apple Campus is. Yep, it's One Infinite Loop.
78

79
00:06:00,220 --> 00:06:03,460
They decided to call the road on their campus Infinite Loop.
79

80
00:06:03,460 --> 00:06:07,780
So Apple Campus is actually on the building that's at the address One Infinite Loop.
80

81
00:06:07,780 --> 00:06:14,260
And this is a little bit of an insider programmer humor. That refers to exactly what we just experienced,
81

82
00:06:14,560 --> 00:06:19,070
the infinite loop, where your computer will carry on until eternity,
82

83
00:06:19,180 --> 00:06:20,860
and instead crashes your code.
83

84
00:06:21,040 --> 00:06:21,340
All right.
84

85
00:06:21,340 --> 00:06:26,380
Just before I show you the challenge for this lesson I want to tell you a joke.
85

86
00:06:26,440 --> 00: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

87
00:06:34,390 --> 00:06:34,740
All right.
87

88
00:06:34,750 --> 00: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

89
00:06:41,770 --> 00:06:43,890
song 99 bottles of beer.
89

90
00:06:44,080 --> 00:06:46,210
So if you never heard of the song it goes something like this.
90

91
00:06:46,250 --> 00:06:48,580
99 bottles of beer on the wall, 99 bottles of beer.
91

92
00:06:48,580 --> 00: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

93
00:06:54,010 --> 00: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

94
00:06:59,980 --> 00:07:00,540
of beer.
94

95
00:07:00,730 --> 00:07:01,960
Go to the store and buy some more,
95

96
00:07:01,960 --> 00: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

97
00:07:08,050 --> 00:07:10,550
number decreases by 1.
97

98
00:07:10,570 --> 00:07:16,970
So this is a perfect opportunity to practice what you have just learned using the while loop.
98

99
00:07:16,990 --> 00:07:23,140
So I want you to create a function inside Chrome Snippets, and you can call it anything you want,
99

100
00:07:23,140 --> 00:07:28,370
for example I've called mine beer. And I want you to be able to call it inside the console.
100

101
00:07:28,660 --> 00: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

102
00:07:34,780 --> 00: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

103
00:07:41,320 --> 00:07:45,110
instead you'll use the while loop to do this for you.
103

104
00:07:45,130 --> 00:07:49,090
So pause the video now and try and give this challenge a go.
104

105
00:07:49,210 --> 00:07:51,900
I'll see you on the next lesson where we go through the solution.