Welcome to S-Design
The home of your bespoke, professional, fast-loading, interactive, database-driven web presence.
Menu
JAVASCRIPT TUTORIALS


JAVASCRIPT Loops

Loops allow you to do the same thing over and over again, in quick succession. If you need to do something 20 times, instead of doing it 20 individual times, you can do it once inside of a loop set to run 20 times.

Let's take a look at the veg array we first looked at in the JavaScript Arrays chapter: <script>
var vegtext='';
veg=["peas","carrots","parsnips","potatoes","broccoli"];

for(i=0;i<veg.length;i++){
vegtext+=veg[i];
}
</script>
Here we're using a for loop to go through the $veg array. There are a few different types of loops in JavaScript, which we'll talk about later.

Let's explain the opening for() function: i=0; This sets the variable called i to an initial value of 0.

i<veg.length; This says, as long as the value of i is less than (<) the total length/count of the array called veg... then keep going through this loop.

i++; This says to increment the value of i by 1 at the end of each loop.

When this loop first starts, it sets i to 0, then starts the loop as follows:
[1] Is the value of i less than the length of veg (which is 5). If yes, go to step 2, otherwise, stop the loop.
[2] Process the intructions inside the curly braces/bracket {}, and proceed to step 3.
[3] Increment i by 1.

In sequence, this is what the above for loop will actually do:
i=0
Is 0 (i) less than 5 (length of veg)? Yes, so print out the value of veg 0 (veg[i]). Increment i by 1 (so i now equals 1).

Is 1 (i) less than 5 (length of veg)? Yes, so print out the value of veg 1 (veg[i]). Increment i by 1 (so i now equals 2).

Is 2 (i) less than 5 (length of veg)? Yes, so print out the value of veg 2 (veg[i]). Increment i by 1 (so i now equals 3).

Is 3 (i) less than 5 (length of veg)? Yes, so print out the value of veg 3 (veg[i]). Increment i by 1 (so i now equals 4).

Is 4 (i) less than 5 (length of veg)? Yes, so print out the value of veg 4 (veg[i]). Increment i by 1 (so i now equals 5).

Is 5 (i) less than 5 (length of veg)? No, so stop the loop!

IMPORTANT:
If your array is likely to be huge, it's better to store it's size (it's length) as a variable, and use that inside the for loop, to save the loop having to check the array count on every loop.
Example: <script>
var vegtext='';
veg=["peas","carrots","parsnips","potatoes","broccoli"];
count=veg.length;

for(i=0;i<count;i++){
vegtext+=veg[i];
}
</script>


Now that we've explored for loops, let's take a quik look at other types of JavaScript loops... the for...in, while and do...while loops


for...in Loop:
<script>
var vegtext='';
veg=["peas","carrots","parsnips","potatoes","broccoli"];

var i;
for(i in veg){
vegtext+=veg[i];
}
</script>
The for...in loop is the best way to go through an array, when you don't need to know each array values' index. In other words, if you don't need to know that "carrots" is at index 1 and you simply need it's value... the for...in loop is quicker than a for because it doesn't need to keep checking the array index, or increment values after each loop!

while Loop:
<script>
var vegtext='';
veg=["peas","carrots","parsnips","potatoes","broccoli"];

count=0;

while(count<5){
vegtext+=veg[count];
count++;
}
</script>
The while loop is best when you want to continue looping while a certain condition is true. This doesn't have to be related to an array!

do...while Loop:
<script>
var vegtext=''; veg=["peas","carrots","parsnips","potatoes","broccoli"];

count=0;

do{
vegtext+=veg[count];
count++;
}
while(count<5);
</script>
The do...while loop is similar to the while loop except that it does something first, and then loops if a certain condition is true!
If we were to use the condition of while(count<0)... the while loop would print out nothing, whereas the do...while loop would print out veg[0];
Title