All language subtitles for 010 Control Statements_ While Loops.en

OK. So, truth be told, our function is still kind of terrible.

It requires us to run fizzBuzz every time.

What if we wanted to print out the sequence for the first 100 numbers? Then

do we have to sit there and write fizzBuzz a hundred times?

No, no, no, of course not.

We're programmers, remember. What if we can get the computer to run our code 100 times by itself?

Well this is where loops come in. And the simplest type of loop are what are called while loops.

And the way the while loops work is that, in between the parentheses, there is a statement, and while that

statement is true, then the code inside the curly braces will run again and again and again and again,

until that statement is no longer true.

So let's take a look at this example.

We create a variable called i,

and we set it to equal 1.

So at this point i is equal to 1.

And this is stored inside the computer's memory,

so that's the grey area, something that we don't get to see,

but the computer is holding that data for us.

So i currently equals 1.

Now the code goes to the while loop, and it will evaluate the statement in between the parentheses.

So is i currently less than 2?

Well, 1 is definitely less than 2.

So this is true.

And if the statement is true then that means that the computer will execute the code in between the

curly braces, which currently just tells it to console.log the value of i, which of course as we know

is equal to 1.

Now the next line of code inside this while loop increments i, and so i is now equal to 2.

So now, after this loop is completed, then the code jumps back to the beginning of the while loop and

it evaluates that condition again.

So is i still less than 2?

Well, 2 is not less than 2. 2 is equal to 2,

right?

So this is now false, and that means that this while loop will stop, and it will skip the loop and go to

the next line of code below.

So this is how a while loop works.

So if we wanted to modify our fizzBuzz function in order to get it to run automatically using the while

loop, then we can simply add a while loop here, and the condition that we're going to check is while count

is less than or equal to 100,

then we will carry out the if checks every single time.

So now if I run our code and I run fizzBuzz, then you can see that the while loop runs a 100 times, adding

100 values to our array, and it prints out the exact sequence that we would get if we played this game

a 100 times, or if previously we called the function fizzBuzz a 100 times.

So the order of events starts off with count being equal to 1,

and when we first hit the while loop, 1 is obviously less than 100,

so everything inside the while loop will be executed. And the first thing we do is we check to see if

count is divisible by 3 and if count is divisible by 5.

If so then we add fizzBuzz to our array,

otherwise if it's only divisible by 3 we add a “Fizz”,

and if it's only divisible by 5 we add “Buzz”,

otherwise we just add the number of count. And once we've checked all of these then we increment count.

So it's now 2.

And we get to the end of the while loop.

As you can see when I click on this closing brace there's a little line under the opening brace to show

you the entire block of code that is inside the while loop.

So once it gets to the bottom here and it goes back up to the top and checks again to see if this statement

is still true, is count still less than 100. So count is now 2. 2 is still less than 100.

And it goes on and on and on for 100 times until count is now 101.

So when it's 101 then this condition is no longer true.

Count 101 is not less than or equal to 100,

so it skips this while loop and continues to the next line, which happens to be line 22, where we get

our entire array printed out in the console.

So the problem with while loops is that it's actually quite error prone, because it will continue to run

infinitely until the statement inside here becomes false.

So, if you made a mistake, say for example if you forgot to increase the count variable, so it stays as

1 and it never gets increased, then this statement will always be true.

1 is always going to be less than 100,

and if we don't change it's value inside the while loop, then this loop will run until eternity.

And what that means in practice, if you dare try it, is that your tab will simply hang. So I'll show you

what happens.

Don't be afraid of trying things,

even if you know that it's bad, because you'll recognize it the next time you accidentally make this

mistake.

So if I hit run now, and I call fizzBuzz, you can see that my tab will actually crash, and you can see

that DevTools was disconnected, and you can see that Chrome is actually saying can't open page,

try the following.

So basically this whole tab has just now crashed.

This gives you a little bit of a hint of what's going on.

But essentially this is what you would call an infinite loop.

Guess what the address of the Apple Campus is. Yep, it's One Infinite Loop.

They decided to call the road on their campus Infinite Loop.

So Apple Campus is actually on the building that's at the address One Infinite Loop.

And this is a little bit of an insider programmer humor. That refers to exactly what we just experienced,

the infinite loop, where your computer will carry on until eternity,

and instead crashes your code.

All right.

Just before I show you the challenge for this lesson I want to tell you a joke.

So a programmers wife tells him, “While you're at the store, get some milk”, and he never comes back again.

All right.

So for this challenge I want you to use the while loop and print out in the console the lyrics of the

song 99 bottles of beer.

So if you never heard of the song it goes something like this.

99 bottles of beer on the wall, 99 bottles of beer.

Take one down and pass it around, 98 bottles of beer on the wall. And you can see that the number

goes down and down and down until finally we get to no more bottles of beer on the wall, no more bottles

of beer.

Go to the store and buy some more,

99 bottles of beer on the wall. So you can see that this is a repeated pattern where in each line the

number decreases by 1.

So this is a perfect opportunity to practice what you have just learned using the while loop.

So I want you to create a function inside Chrome Snippets, and you can call it anything you want,

for example I've called mine beer. And I want you to be able to call it inside the console.

And when you do it should print out all of the lyrics of ninety nine bottles of beer on the wall.

Now, I hope that you're not going to spend your time writing it out a single console.log at a time, but

instead you'll use the while loop to do this for you.

So pause the video now and try and give this challenge a go.

I'll see you on the next lesson where we go through the solution.