JavaScript Loops
Very
quickly we’ll find ourselves writing code that we want to have happen multiple
times. Sometimes when we want to change background color, hiding everything in
a menu, we’ll realise that this code we want repeated.
The main
issues what any loop, is not when to loop, looping is easy, it’s when to stop.
While Loop
So let’s first fig rout the most basic kind of loop.
Well we’ve seen if statements before. And this is all we have here. If this
conditions is true in the parentheses we’ll execute the code inside the curly
braces. All we do here is to replace the if with the word while, we have a
loop. Whatever is in the block get done every time the loop goes around.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
var a = 0;
while ( a < 9) {
console.log(a);
a++;
}
</script>
</body>
</html>
In the above example we ask is
a less than 9, and return true. Without the increment a++ at the end of the
body of the loop we create infinite loop. So the loops will start increment
every time we go around the loop and we’ll keep on going.
There’s another variant of the while loop called
do…while loop. This keep the same basic format, but we actually move the
condition to the end. So instead of while a is less than 10 been at the start
of the block is actually at the end of the block, because of that we actually
need a semi-colon at the end of the do…while loop.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
var a = 1;
do {
console.log(a)
a++;
} while ( a < 10);
</script>
</body>
</html>
So let you know. while loops
are much more common than these do..while loop. In most loops is expected to check
the condition before entering the loop, and it’s more readable that way too.
for Loop
With the for loop you actually
bring three pieces together inside the parentheses they all there at the top.
First we set up the index, so in this case var i = 1, it follows semi-colon, than we
check the condition is less than 10, than even it’s right at the top this is
the incrementer, this happens at the end of every loop. We don’t have to go by one.
You could go up by 4, 3, 10 or 500 if you wanted. So this is very readable,
because everything about the loop is right there at the top, you don’t have to
look outside the loop for the index or the increment. So for loop is very
common way of doing this.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
var a = 0;
for (i=0; a<10; a++) {
console.log(a);
}
</script>
</body>
</html>
Break
Break is a word that will jump
us out of the loop. Inside the for we have if statement for example and say is
a equal to 25, no it isn’t. So will skip passed that code block and continue on
hit the end of the loop go back up, check condition again, yes I is still less
than 3000, continue on till i is equal to 25 and manually hit break. As soon as
we hit break we basically manually say „we are done“, we jump completely out of the loop and we can
continue on.
If we say break we are
completely done with the loop.
Example:
<html>
<head>
<title>Untitled
Document</title>
</head>
<body>
<script>
for
( i = 0; i < 3000; i++ ) {
console.log(i);
if (
i == 25) {
break;
}
}
</script>
</body>
</html>
Continue
The word continue doesn’t mean
jump out of the loop, it means jump back up and check the condition again.
Don’t continue and further with this iteration just this one. We are not done
with the entire loop but we are done with this time around.
Example:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script>
for ( i = 0; i < 99; i++ )
{
console.log(i);
if ( i == 12) {
continue;
}
// do stuff
}
</script>
</body>
</html>
