JavaScript Loops

Table of content:

What is a loop in JavaScript

A loop in JavaScript allows you repeat a section of code a certain number of times which is useful if you want to shorten your code or change some of the variable values for example. By using loops you also avoid typing errors in the repeating lines of code.

for loop

A for loop starts with the for keyword which is followed by a set of parentheses with three statements inside that tells the loop how many times it should repeat.


for (var count=1; count<5; count+=1)

The first statement var count=1 creates a variable named count and assigns it an initial value of 1. This is the starting point for the number of times the loop repeats.

The next statement count<5 tells the loop when to stop running, in our case then count is less than 5 which means that the loop will repeat four times.

The last statement count+=1 determines the rate at which the variable is changed and whether it gets larger or smaller each time.

Example:


for (var count=1; count<5; count+=1) {
document.write("This is a JavaScript loop.");
}

Notes:
The code you want the loop to execute has to be enclosed within curly brackets.
If the third statement will be changed to count+=3 for example the loop will run only twice since first time the value of count is 1 then the second time the value will be 4 and the third time it will be 7 which is not less than 5.

You can create some kind of list style using the fact that the variable is going up by 1 each time.


for (var count=1; count<5; count+=1) {
document.write(count+". This is a JavaScript loop.
");
}

Loops can be nested within other loops. Of course you can nest as many levels deep as you can handle.


for (var count=1; count<5; count+=1) {
document.write(count+". This is a JavaScript loop.");
for (var count2=1; count2<5; count2+=1) {
document.write("This is the nested loop.");
}
}

Note:
You can nest different types of block inside one another. For example you can nest an if/else statement inside a for loop.

while loop

A while loop repeats a short comparison until it is no longer true. A while loop does not create a variable. You have to remember to create it, assign a value to it then insert it into the loop.


var MyVariable=1;
while (MyVariable<10) {
document.write("This is a while loop in action.");
MyVariable++;
}

The script starts with the declaration of the variable MyVariable which is assigned a value of 1. Then the loop begins with the while keyword followed by the condition MyVariable<10 so the loop will execute if MyVariable<10.
Notice the MyVariable++;. Without it the loop will repeat indefinitely since the variable MyVariable will stay with the value of 1.

As in the case of for loops you can nest a while loop within another loop, for loop, if/else statement etc.

do while loop

The code within the do while loop will be performed at least once even if the comparison used returns false the first time then the comparison is used each time afterward to determine whether or not it should repeat.


var MyVariable=1;
do {
document.write("This is a do while loop in action.");
MyVariable++;
}
while (MyVariable<10);

The do while loop code looks similar to the while loop code. It starts with the declaration of the variable then the do keyword follows. The do keyword makes sure that the code block is executed at least once.

In our case the document.write() is executed once then is executed 8 more times until the variable value reaches the value of 10 (by increasing with 1 each time).

Below is an example of do while loop that is executed just once because the comparison returns false.


var MyVariable=15;
do {
document.write("This is a do while loop in action.");
MyVariable++;
}
while (MyVariable<10);

Only the value of he variable MyVariable is changed. Now the value is 15 which is not less than 10.

break and continue statements

The break and continue statements allow you to stop what a loop is doing.


for (MyVariable=1; MyVariable<10; MyVariable++) {
if (MyVariable==5) {
document.write("MyVariable is 5 now. I stopped!");
break;
}
else {
document.write("This is part of the loop.");
}
}

At the first glance the loop should write 9 times the sentence “This is part of the loop.” but then a condition appears. When MyVariable has a value of 5 the script will write the sentence “MyVariable is 5 now. I stopped!” then the keyword break will stop the loop.

In contrast, the continue statement will stop the loop when the variable is 5 but then will continue where it left off.


for (MyVariable=1; MyVariable<10; MyVariable++) {
if (MyVariable==5) {
continue;
}
document.write(MyVariable+". This is part of the loop.");
}

The sentence “This is part of the loop.” will be written 8 times only because nothing will be written on the page when MyVariable is 5.

Leave a Reply