JavaScript Introduction | Control Flow Statements | Iteration Statements

Iteration Statements

An iteration statement controls a program so that it repeatedly executes the same command a certain number of times. Because much of the code a program processes is repetitive, iteration statements are among the most frequently used statements.

JavaScript provides the following forms of iteration statements.

1. while statement
2. do / while statement
3. for statement
4. for / in statement
5. for / of statement

while Statement

The while statement repeatedly executes the given statement until a specific condition is satisfied.

The syntax of the while statement is as follows.

while (expression) {
    statement to execute repeatedly while the expression result is true;
}

The while statement first determines whether the expression is true, and if it is true, executes the statement inside it.
After all internal statements have been executed, control returns to the expression and determines again whether the expression is true.
An iteration statement repeatedly executed through this expression check is called a loop.

var i = 1;
while (i < 10) { // Repeat the while statement only while variable i is less than 10.
    document.write(i + "<br>");
    i++; // Increase i by 1 on each iteration, and end the loop when i becomes greater than 10.
}

If no statement inside the while statement changes the expression result, the program will repeat the loop forever. This is called falling into an infinite loop, and a program that falls into an infinite loop never terminates. An infinite loop should be avoided unless it is specifically intended.

Therefore, when writing a while statement, you must include a statement that changes the expression so that the expression result eventually becomes false.

If the statement executed by a while statement is only one line, braces ({}) can be omitted.

do / while Statement

A while statement checks the expression before entering the loop.
However, a do / while statement executes the loop once first and then checks the expression.
In other words, a do / while statement always executes the loop at least once regardless of the expression result.

The syntax of the do / while statement is as follows.

do {
    statement to execute repeatedly while the expression result is true;
} while (expression);

var i = 1, j = 1;
while (i > 3) { // Because the initial value of i is 1, this while statement is never executed.
    document.write("i : " + (i++) + "<br>");
}
do { // Because the initial value of j is 1, this do / while statement is executed only once.
    document.write("j : " + (j++) + "<br>");
} while (j > 3);

for Statement

Unlike a while statement, a for statement is an iteration statement that includes its own initializer, expression, and increment expression.
Therefore, it can express loops more concisely than a while statement.

The syntax of the for statement is as follows.

for (initializer; expression; incrementExpression) {
    statement to execute repeatedly while the expression result is true;
}

Each of the initializer, expression, and increment expression that make up a for statement can be omitted.
Also, by using the comma operator (,), you can use multiple initializers or increment expressions at the same time.

Using a for statement, the while statement in the previous example can be expressed even more concisely.

for (var i = 1; i < 10; i++) {
    document.write(i + "<br>");
}

If the statement executed by a for statement is only one line, braces ({}) can be omitted.

for / in Statement

The for / in statement is an iteration statement with a completely different form from the general for statement. The for / in statement lets you iterate over all enumerable properties of an object.

An enumerable property means a property whose internal enumerable flag is set to true.
These properties can be accessed with a for / in statement.

In each loop, this iteration statement assigns the name of an enumerable property of the object to the specified variable. Using the assigned variable, you can access the enumerable properties of the object sequentially inside the loop.

The syntax of the for / in statement is as follows.

for (variable in object) {
    statement to execute repeatedly for the number of all enumerable properties of the object;
}

The following example accesses array elements with a for / in statement.

var arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) { // outputs the index of every element in array arr.
    document.write(i + " ");
}
for (var i in arr) { // for / in statement that performs the same operation
    document.write(i + " ");
}

The following example accesses object properties with a for / in statement.

var obj = { name : "Yi Sun-sin", age : 20 };
for (var i in obj) {
    document.write(i + "<br>");
}

The for / in statement returns only enumerable properties, not every property an object has.

for / of Statement

The for / of statement is an iteration statement that lets you iterate over iterable objects.

In JavaScript, iterable objects include Array, Map, Set, and the arguments object. In each loop, this iteration statement assigns the value of an enumerable property of the object to the specified variable.

The syntax of the for / of statement is as follows.

Syntax

for (variable of object) {
    statement to execute repeatedly for the number of all enumerable properties of the object;
}

The following example accesses array elements with a for / of statement.

var arr = [3, 4, 5];
for (var i = 0; i < arr.length; i++) { // outputs every element of array arr.
    document.write(arr[i] + " ");
}
for (var value of arr) { // for / of statement that performs the same operation
    document.write(value + " ");
}

The for / of statement is not supported in Internet Explorer.

The following example accesses properties of a Set object with a for / of statement.

var arr = new Set([1, 1, 2, 2, 3, 3]);
for (var value of arr) {
    document.write(value + " ");
}