Thursday 3 July 2014

Chapter 11: JavaScript Loops

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>

No comments:

Post a Comment