JAVASCRIPT: A Beginner’s Guide to Learning the Basics of JavaScript Programming (2015)

Chapter 9. Loops

Aside from allowing your script to have statements to be executed depending on the condition of the script, you can also insert loops in JavaScript. Loops are code blocks that allow the browser to repeatedly execute statements. You can specify how many times the loop will reexecute the statements. Or you can just indicate a condition that will tell the loop when to stop looping.

For Loop

The for loop is the most basic and common loop that you can use in JavaScript. With the for loop, you can easily create a loop block that will repeat according to the number that you will indicate. For example:

for (i = 1; i < 100; i++) {

alert("This message will popup for 100 times.")

}

The for loop condition has three parts. The first is the declaration of variables that you will need in the loop condition or the code block. It will be executed once before the loop begins. In this case, the variable declared is i. And it was assigned a value of 1.

The next part of the condition is the condition itself. As long as the condition returns True, the loop will continue working. When the condition returns False, that is the time the for loop will stop. The condition will be checked before a loop is executed.

In this case, the condition is i < 10. As long as the variable i’s value stays less than 10, the loop will continue. On the other hand, once it becomes equal to 10 or greater than 10, then the loop will stop.

The last part is the step. This statement will be executed after every loop. In the example, the step part is i++. The statement is i incremented using the increment operator. In every loop, 1 is added to the value of i. Because of that, the value of variable i is changed in every loop.

Eternal Loops

Eternal loop is a condition wherein your loop will just keep on looping until the page, your browser, or your computer is closed or crashed. In most cases, eternal loops happen by accident and carelessness. Unless intended, eternal loops can be bad since it can slow down your page, browser, or computer. Depending on the number and complexty of the statements within a loop, your computer may crash or experience a massive slowdown due to wasted computer resources (RAM and CPU) by the eternal loop.

Eternal loop happens if you fail to insert a condition that will make your loop stop. For example:

for(i = 1;i > 0; i++) {

i++;

}

This example will loop forever because the condition placed on the for statement will never return false. As the example code goes, the variable I will never have a value equal to 0 or less than 0. Although, if this example was executed in a modern day computer, the impact would be not enough to crash a computer or browser. Nevertheless, slow down can be experienced.

Of course, the best way to fix this eternal loop is to fix the condition that was placed. Another method is to place a conditional statement together with the break keyword. For example:

for(i = 1;i > 0; i++) {

if(i == 100) {break;}

}

While Loop

Another loop that you can use in JavaScript is the while loop. The while loop is like an advanced version of the for loop that encourages users to customize their loop. Unlike for loop, the while loop only requires a condition to run. For example:

var i = 1;

while(i < 100) {

alert("This message will popup for 10 times.");

i++

}

This is the while loop version of the first for loop example provided earlier. As you can see, the declaration statement for variable i was placed outside the loop itself and the step increment is placed within the loop.

Of course, for new programmers, using the while loop will expose them to higher probability of creating eternal loops.

Do While Loop

The good thing with while loop is its versatility. And to let you have full control on how your loop behaves, you can use the do keyword together with while. To use a do while loop, check out this example:

do {

alert("This message will popup for 10 times.");

i++;

}

while(i < 100);

The main difference of the do while loop in all the previous loop variants is that the condition will be only processed once a loop is finished. Meaning, it will be executed regardless of the condition. It will only check the condition after the first loop, and if the condition returns True, the loop will be activated once more. IT will only stop until the while condition returns False.