Loops in JavaScript

There are five loops in JavaScript - while, do..while, for, for..in, and for each..in.

1. while

The while statement creates a loop in which code is executed as long as some condition is true. A while loop executes the code contained within its braces until a condition is met. For example,

var count = 0;
while (count < 10) {
// Do something in here.
// Multiple lines are fine.
// Don't forget to increment the counter:
count++;
}

Keep in mind two important aspects of while loops:

1. The code contained within a while statement might never execute, depending on the starting value of the variable or condition being tested.
2. The condition being tested by the while statement must be changed within the loop.

Making sure the code executes at least once

In the above example, the variable count is initially set to the number 0. The while statement then runs as follows: the evaluation of the while statement examines the value of the count variable to see whether it is less than 10. Because it is, the code within the braces executes. However, if the value of the count variable was not less than 10, the code within the while statement’s braces would never execute, not even once.

The do...while loop executes code once, no matter what the initial condition is.

Changing the condition

The evaluation of the while statement examines the variable to see whether it is less than 10. If count is less than 10, the code within the while loop executes. One of the lines of code within the while loop increments the count variable using the ++ unary operator, as follows:

count++;

When the code in the while statement finishes executing, the evaluation repeats. Without the code to increment the count variable, count would always be less than 10, so you would have an endless loop.

2. do...while

Unlike the while statement, the do...while statement executes the code contained in its braces at least once. The while statement might read like this: "While the condition is met, run this code". However, the do...while statement might read like this: "Do (or run) this code while the condition is met".

For example,

var count = 0;
do {
alert("Count is " + count);
count++;
}
while (count < 3);

When this code executes, three dialog boxes appear. During the first run, the count variable holds a value of 0 because the variable is still set to the initial value. After running once, the count variable gets incremented. When the while statement is evaluated, count is still less than 3, so the code is executed again.

3. for

A for loop is used in the same way a while loop is, namely, to execute code a certain number of times. You use a for loop to create a loop in which the conditions are initialized, evaluated, and changed in a compact form. For example,

for (var count = 0; count < 10; count++) {
// Execute code here
}

A for statement has three clauses in parentheses. The first clause sets the initial expression. The next clause of a for statement specifies the test expression. The final expression is usually used to increment the counter used for the test.

4. for...in

The for...in loop iterates through the properties of an object, returning the names of the properties themselves. For example,

for (var myProp in myObject) {
alert(myProp + " = " + myObject[myProp]);
}

In this code, the variable myProp gets set to a new property of myObject each time the loop is executed.

5. for each...in

Whereas the for...in construct returns the name of the property, the for each...in loop returns the value of the property. The syntax is essentially the same, but with the addition of the word each. For example,

for each (var myValue in myObject) {
alert(myValue " is in the object.");
}