JavaScript For Loops

Loops are used in programming to automatically execute repetitive tasks.

For example, suppose we want to print "Hello World" 10times. It can be done as follows:

　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");
　　document.write("Hello World<br>");

In the loop, the statement only needs to be written once, and the loop will execute10times, as shown below:

for (let i = 0; i <　10; i++) {
document.write("Hello World<br>");
}

For Loop

The syntax of the for loop is as follows:

for (initialization; condition; final-expression) {
　　　　//The statement to be executed
}

initializationBefore executing the statement (once).

conditionDefine the condition for executing the statement.

After executing the statement, it will be executedfinal-expression.

for (var i = 0; i <　5; i++) {
　　　　document.write("<br>The number is "　+　i);
}

From the above example, you can read:

• initialization Set the variable before the loop starts (variable i = 0).

• condition Define the condition for the loop to run (I must be less than5)

• Each time the code block in the loop is executed,final-expression willIncrease a value (i ++)

In the following example, we loop through an array in ascending order:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = '';
for (var i = 0; i < fruits.length; i++) {
　　　　txt　+= fruits[i]　+　'<br>';
}

In the following example, we loop through an array in descending order:

var fruits = ['Apple', 'Mango', 'Banana', 'Orange'];
var txt = '';
for (var i = fruits.length　-1; i >= 0; i--) {
txt　+= fruits[i]　+　'<br>';
}

Optional expressions

All three expressions in the for loop are optional. For example, we can write the same For statement without an initialization expression by initializing the variable outside the loop.

//Declare variables outside the loop
var i = 0;
//Initialize loop
for (; i <　5; i++) {
document.write(i);
}

In this case, the first semicolon indicates that the statement is for initialization, condition, or final expression, even if it is omitted, it is necessary.

Below, we can also remove the condition from the loop. We will use an if statement and break to tell the loop to stop when i is greater than3to stop running, which is the same astrueopposite.

//Declare variables outside the loop
var i = 0;
//Omit initialization and condition
for (; ; i++) {
if (i >　3) {
break;
}
document.write(i);
}

Note:break If the condition is omitted, this statement must be included, otherwise the loop will run infinitely and may cause the browser to crash.

Finally, you can remove the variable by placing the final expression at the end of the loop. The two semicolons must still be included, otherwise the loop will not run.

//Declare variables outside the loop
var i = 0;
//Omit all expressions
for (; ; ) {
if (i >　3) {
break;
}
document.write(i);
i++;
}

As can be seen from the above examples, including all three statements usually produces the most concise and readable code. However, it is very useful to know that you can omit statements later.

Nested loops

You can use nested loops, that is, loop within another loop.

Nested loops are used in most places of matrix multiplication, showing tables and many other places:

var txt = "";
for (var row = 0; row <　10; row++) {
　　　for (var col = 0; col < row; col++) {
　　　txt　+= ";　*　";
　　　}
　　　txt　+= '<br>';;
}

For ...in loop

for...in loop to iterate over the properties of the object.

To demonstrate, we will create a simplemyObjan object that contains somename: valueYes.

var myObj = {
name: "VISHAL",
age:　22,
height:　175,
city: "New Delhi",
getNothing: function () { return ""; }
};
for (let x in myObj) {
document.write(x);
}

In each iteration, an attribute from the object is assigned tox,And this loop continues until all properties of the object are exhausted.

The following example implements a for...in loop and prints the properties of the web browser.NavigatorObject:

for (let x in navigator) {
document.write(x);
}

For ... Of Loop

The for...of statement creates a loop to iterate over iterable objects, including: built-in String, Array, array-like objects, and user-defined iterable objects.

let iterable = [10,　20,　30,　40,　50];
for (let x of iterable) {
document.write(x);
}

In each iteration, an element from the object is assigned tox,And this loop continues until all elements of the object are exhausted.

Whether for...in or for...of loop iterates over things, the main difference between them lies in what they iterate over:

• The for...in loop iterates over the enumerable properties of the object in any order.

• The for...of loop iterates over data, and the object to be iterated is defined.

While Loop

The while loop and do...while loop will be explained in the next chapter.