Welcome back in the next few videos we're going to discuss javascript loops.
So we have a few different objectives.
The first one is to understand why we use loops and what they are.
The next one is to understand what dry it's an acronym Diyar why what that stands for and how to write
dry code.
And then lastly we'll be writing some simple wild loops to start.
So here's a problem I'll pose if I want it to print the numbers from 1 to 10 each one on a different
line with what we know so far.
I would have to have 10 different cons. logs and that's already not ideal but what if I wanted to do
every number between 1 and 10000 or the first million numbers suddenly I'm having to write a lot of
code myself.
So this is where loops come in.
So even though we most likely wouldn't print the numbers from 1 to 10000 in a real production application
.
Let's take an example like Facebook where a single photo or post can have 10000 different comments on
it like those photos that go viral.
They get thousands and thousands of comments behind the scenes.
There's some sort of loop that's being used to print out all the comments on the page rather than for
every comment there needing to be a separate line of code.
So before we see the syntax of wild loops in javascript I want to introduce this concept called dry
code so dry stands for.
Don't repeat yourself.
It's a concept that's thrown around a lot in all sorts of programming languages but it comes down to
is that we don't want to repeat our code.
So if we take a look at this example here.
This code is very very repetitive.
The only difference is the number that we're printing out.
But otherwise every line is the same.
So this code is not what we would consider dry.
Some people would call this wet which I've heard what code stands for right.
Everything twice that's not as common to hear though as dry.
So what loops do is they allow us to dry up our code.
They are one of the tools at our disposal.
Some of the others that we'll learn about later are functions in arrays and objects but loops are the
most fundamental one.
So we're going to start by talking about.
There are multiple types of loops that will see the first one is the while loop and the while loop is
very similar to an IF statement.
So it takes a condition like X less than five or answer not equal to and and then while that condition
is true it will repeat code that we put in a set of curly braces.
So an if statement is very similar except it doesn't repeat the code it just runs at one time a while
loop will continue to run the code as long as the condition is true.
So here's an example.
This is how we could print the numbers from 1 to 5 Using a while loop.
So we start with a variable called count could be named anything but count we started at 1.
Then we have our while loop with a condition that says count less than 6.
So the very first time this code runs count is equal to 1.
So one is less than six.
So this is true.
So here's an example of using a while loop to print the numbers from 1 to 5.
So we start by initially.
So we start by initializing a variable called count could be named anything.
And we started as one then we have our while loop and the syntax again is while and then a condition
.
In this case the condition is count less than 6.
So the first time that this loop runs count is 1.
So one less than six is true.
So then this code is run.
So that's going to print out count is 1 and then it will add 1 to count and then it goes again.
And it checks is count which is to is to less than 6.
That's true.
So it prints again and it adds 1 to count.
Now it's three.
This is true again.
So it prints counted three adds one to count which is four and so on until the final time count is five
five is less than six.
We print out count five.
We add one to count which is now six.
And then it tries to run again and it realizes six is not less than six.
So then it's done and that's it.
So I'll go ahead and open up my con. and run this code just paste it in here.
Count starts at 1.
It runs wild count is less than six.
I hit enter and I get counted 1 all the way down until the last time a the loop count is five so I could
also try changing this a bit if I wanted to print the numbers between five and 20 if I wanted 20 to
be included.
I would need to change this to either be less than or equal to 20 or less than 21.
So I'll do less than or equal to and that will actually include 20 as you can see five down to 20.
Similarly I can also do things where I'm not just adding one every time.
So if I want to count by twos I would just write count plus equals two rather than just adding one.
So this time it will start at 5.
Then it will go through.
The condition is true.
It prints out the Count and adds to it.
Now we're at seven and then it adds to next time and so on and we end up with this 5 7 9 11 13:15 1719
.
So as you can probably see already a loop can help us save a lot of time rather than having to have
10 different cons about log statements or 15 Konst about log statements.
We just wrote it one time in a loop and that takes care of the rest for us.
So I have another example here where instead of just printing numbers we're using a while loop to loop
through a string and printout every character separately so the output looks like this.
H E L L O N separate lives.
So that's five.
console dot log statements and the way that we achieve that we start with our string equal to hello
.
It's called as TR then we have our accounts which will be the number that we use to access a character
in the string.
It's the index.
And I remember the first character is always at index 0.
So then what we're going to do is say while count is less than the length of the string so the length
is one two three four or 5.
So while the counting is less than 5 We're going to print out the string with a character add index
of count.
So what that means I'll open up my Consul and step through this.
We start this this over here.
String is equal to hello Vark counts is zero.
So rather than just copying the while loop over I'm going to start with just showing you how it works
.
So while count is less than the string length and string length is five.
So 0 is less than 5.
That is true.
We're going to cancel that log string bracket count.
So that's going to be a string of zero which gives us h.
And then we add one to count so count plus plus.
So now count is 1.
So we repeat this again is count less than string length is one less than five.
Yes.
So now we do this line again.
console dot log string of count and count is now 1.
So we get it.
So this keeps going until the very last time or a printout Oh and we add 1 to count which then is equal
to 5 and 5 is not less than 5.
So the loop is over.
Remember that the length is always one greater than the highest index of a string.
So the length is five characters but the maximum index is four because we start at 0 1 2 3 0 is at index
4.
So that's how you could use a loop to print out every character in a string.
So one must note about wildly AUPs is that we can create something called an infinite loop.
If we're not careful.
So an infinite loop occurs when the condition that we provide is never false.
So it just keeps going and going and going and going forever and these are obviously problematic.
They can crush a browser.
They take up all the memory in javascript.
It's not something that you ever want to do.
So here's an example of how one would happen.
We have count equal to zero and then we're saying wow count is less than 10 cancelled out log count
.
Well count is always less than 10 because it's zero and we're never changing count.
So it's never incremented is never going to be over 10.
So this will just print zero forever.
So I don't recommend you do this but you could copy this and paste it into your console.
And what you would see it would print a ton of zeros to start.
And rather than running infinitely most browsers nowadays would actually stop it and alert you that
there's some bad code written there's some infinite loop that's running.
So just to contrast that with a loop like this.
We have an increment count we have to make this condition at some point be false if we don't it will
just keep running forever like this one does here