Loops

Computers are very good at doing the same thing repeatedly. They never get bored. To ask a computer to repeat the same piece of code again and again, programmers use loops. There are three kinds of loops available in JavaScript.

The while Loop

The while loop executes the code which goes inside of it while a certain condition remains true. In a generic way, it can be shown like this:

while (condition) {

  // The code you want to be repeated
}

And here is a real example of this kind of loop:

var i = 3;

while (i < 10000) {
  document.write(i + " ")
  i *= i
}

Try this code in your browser, and it should display four numbers: 3 9 81 6561. So it kept displaying the value of the i variable while it was less than 10000.

The while loop is most useful when you don’t know how many times the code should be repeated. You just allow it to iterate while some condition is true. Note however that it is you, the programmer, who is responsible for defining when the loop ends. If you make a mistake, the loop can become endless. For example, try to comment out the line, where the value of i is changed, like this:

while (i < 10000) {
  document.write(i + " ")
  // i *= i
}

If you try to run this code, then depending on which browser you are using, the browser will freeze at first, but then its internal anti-fault mechanism will figure out that something is wrong with your loop, and it should report the problem in one or the other way.

If the looping condition is false from the very beginning, for example if the initial value of i was 10001, the code inside the loop will never run. Depending on the logic of your script, you might want the code to run at least once before the condition is checked. In this case, another variety of looping construct will be useful, it looks like this:

do {

// The code to be repeated

} while (condition)

And, here is an example you can run in your browser:

var i = 33333;

do {
  document.write(i + " ")
  i *= i
} while (i < 10000)

You will see that the value of i is displayed once.

The for Loop

Let’s say you have ten numbers in an array, and you want to find their average. One of the ways to achieve this is by using the for loop, which repeats the code inside of it the specified number of times. This is how its structure looks:

for (initialization; condition; incrementing) {

  // The code to be repeated

}

The for loop uses a variable to count how many times it has already executed the code. In the very beginning, before doing anything else, this variable receives its initial value. Then the condition of the loop is checked, and if it is true, the code inside the loop is executed. Afterwards, the variable is incremented, and the condition is checked again, and if it is true, the code is executed again, and so on. Let’s look at an example:

var numbers = new Array(10, 12, 37, 54, 23, 6, 73, 59, 28, 81);
var sum = 0;
var i;

for (i = 0; i < 10; i++) {
    sum += numbers[i]
}

document.write("The simple average is " + sum / 10);

We use the for loop here to add all the numbers in the array, one by one, to the sum variable, and then just divide it by 10, which is how many numbers we have. The i variable is used as a counter, and since array members are numbered from 0, we initialize it to 0, and then increment it after the code inside the loop runs. This is the most common way to use the for loop, but you can be quite creative with it, like here:

var i = 100;

for (; i > 1; i /= 3) {
  document.write(i + " ")
}

The for ... in Loop

The for ... in loop is used to iterate over all the elements of an array or the properties of an object. Consider this.

var sum = 0;
var numbers = new Array(10, 12, 37, 54, 23, 6, 73, 59, 28, 81);
for (i in numbers) {
  sum += numbers[i]
}
document.write("The average is " + sum / numbers.length)

This code doesn’t look very different from the previous version. First of all, we don’t need to know how many elements there are in the array to iterate through all of them.

And since we might not know that there are ten elements in this array, we used the length property of the Array object, which tells us the number of elements.