Javascript loops

Imagine you have to write a program which performs a repetitive task such as counting from 1 to 100. Coding 100 lines to do this task would be mundane. There has to be an easier way, right? This is where loops come into the picture. Loops are specifically designed to perform repetitive tasks with one set of code. Loops save alot of time.

This tutorial focuses on:

The for loop
The while loop
The do-while loop
Preventing endless loops
Breaking out of a loop
Continuing a loop

The for loop

The for loop is used to repeat a task a set number of times.

Syntax:

for(var a_variable = initial_value; a_variable < end_value; a_variable_increment){ code to be executed; }

Example:

Output:

1 2 3 4 5 6 7 8 9 10

The for loop has three parts:

variable declaration - The first part of the loop which initializes the variable at the beginning of the loop to some value. This value is the starting point of the loop.
condition - The second part of the loop, and it is the part that decides whether the loop will continue running or not. While the condition in the loop is true, it will continue running. Once the condition becomes false, the loop will stop.
increment statement - The increment statement is the third part of the loop. It is the part of the loop that changes the value of the variable created in the variable declaration part of the loop. The increment statement is the part of the loop which will eventually stop the loop from running.

Lets look at the earlier loop example step-by-step:

The code:

for(var a = 1; a < 11; a++){ document.write(a + " "); }

var a = 1 - The variable declaration part of the loop. A variable named a is declared with a value of 1.
a < 11 - The condition of the loop. It states that as long as the variable a is less than 11, the loop should keep running.
a++ - The increment statement part of the loop. It states that for every iteration of the loop, the value of the variable a should increase by 1. Recall that initially a is 1.
document.write(a + " "); - The actual code that executes in the loop. Will print a number with a single space for each iteration in the loop.

The while loop

The while loop works differently than the for loop. The for loop repeats a segment of code a specific number of times, while the while loop repeats a segment of code an unknown number of times. The code within a while loop will execute while the specified condition is true.

Syntax:

while(condition is true){ execute this code; }

Example:

Output:

5 10 15 20 25

In the above code, a variable named num is initialized with the value of 0. The condition in the while loop is that while num is less than 25, 5 should be added to num. Once the value of num is greater than 25, the loop will stop executing.

The do-while loop

The do-while loop is very similar to the while loop, but it does things in reverse order. The mechanism of the while loop is - while a condition is true, perform a certain action. The mechanism of the do-while loop is - perform a certain action while a condition is true. Furthermore, the code within a do-while loop will always execute at least once, even if the specified condition is false. This is because the code is executed before the condition is tested.

Syntax:

do{ execute this code; } while (condition);

Example:

Output:

5 10 15 20 25

In the above code, a variable named num is initialized with the value of 5. The condition in the do-while loop is that while num is less than 25, 5 should be added to num. Once the value of num is greater than 25, the loop will stop executing.

Preventing endless loops

A necessary precaution when working with a loop is to make sure that the loop is not endless. This occurs when the condition in a loop never becomes false. To prevent endless loops, you need to ensure that the condition in a loop will eventually become false.

Example of an endless for loop:

This example initializes the variable a with the value of 10, and states that as long as a is greater than 5, add 1 to it. Based on the variable declaration and the increment statement, a will always be greater than 5 in this loop, and thus, it is an endless loop.

Example of an endless while loop:

This example initializes the variable a with the value of 50, and states that as long as a is greater than 10, add one to a. Based on the variable declaration and the increment statement, a will always be greater than 10 in this loop, and thus, it is an endless loop.

Example of an endless do-while loop:

This example initializes the variable a with the value of 50, and states that as long as a is greater than 40, add 10 to a. Based on the variable declaration and the increment statement, a will always be greater than 40 in this loop, and thus, it is an endless loop.

Breaking out of a loop

You can completely break out of a loop when it is still running. This is achieved with the break keyword. Once a loop is exited, the first statement right after it will be executed. The break keyword provides an easy way to exit a loop if an error occurs, or if you found what you were looking for.

Example:

Output:

0 1 2 3 4 5 You have exited the loop.

Continuing a loop

While you can break out of a loop completely with the break keyword, there is another keyword used when working with loops - the continue keyword. Using the continue keyword in a loop will stop the loop at some point and continue with the next iteration of the loop from the beginning of it.

Example:

In the above example, the for loop is set to iterate 9 times and print the current value of the variable a during each iteration. The if statement within the loop states that when the variable a is equal to 5, stop the loop and continue with the next iteration of the loop from the beginning of it. For this reason, all the numbers except the number 5 are printed.

Output:

0 1 2 3 4 6 7 8 9