Example of a For loop while loop doing while loop in JavaScript

Different types of loops

JavaScript supports different types of loops:
For-loop code block a certain number of times
For/in-Looping through the properties of an object
While-loops the specified code block when the specified condition is true
Do/while-also loops the specified code block when the specified condition is true
For loop
A For loop is a tool that you will often use when you want to create a loop.

The following is the syntax for the FOR loop:

for (statement 1; Statement 2; Statement 3)
{
The code block that was executed
}
Statement 1 executes before the Loop (code block) starts
Statement 2 defines conditions for running loops (code blocks)
Statement 3 executes after the Loop (code block) has been executed

for (var i=0; i<5; i++)
{
X=x + "The number is" + i + "<br>";
}

From the example above, you can see:

Statement 1 Sets the variable (var i=0) before the loop begins.
Statement 2 defines the conditions for a circular operation (I must be less than 5).
Statement 3 Adds a value (i++) after each block of code has been executed.

Statement 1

In general, we use statement 1 to initialize the variable (var i=0) used in the loop.
Statement 1 is optional, that is to say, no statement 1 is used.
You can initialize any (or more) of the values in statement 1:

for (var i=0,len=cars.length; i<len; i++)
{
document.write (Cars[i] + "<br>");
}

You can also omit statement 1 (for example, when a value has been set before the loop starts):

var i=2,len=cars.length;
for (; i<len; i++)
{
document.write (Cars[i] + "<br>");
}

Statement 2

Usually statement 2 is used to evaluate the condition of the initial variable.
Statement 2 is also optional.

If statement 2 returns True, the loop starts again, and if False is returned, the loop ends.
Tip: If you omit statement 2, you must provide a break within the loop. Otherwise the loop will not stop. This can cause the browser to crash. Read the contents of the break in later chapters of this tutorial.

Statement 3

Typically, statement 3 increases the value of the initial variable.
Statement 3 is also optional.
Statement 3 has several uses. The increment can be negative (i--) or larger (i=i+15).
Statement 3 can also be omitted (for example, when there is a corresponding code inside the loop):
var i=0,len=cars.length;
for (; i<len;)
{
document.write (Cars[i] + "<br>");
i++;
}

For/in Cycle

The JavaScript for/in statement loops through the properties of the object:
var person={fname: "John", lname: "Doe", age:25};
for (x in person)
{
Txt=txt + person[x];
}

While loop

The while loop executes a block of code when the specified condition is true.
Grammar:

while (condition)
{
Code that needs to be executed
}
The loop in this example continues to run as long as the variable i is less than 5:
while (I<5)
{
X=x + "The number is" + i + "<br>";
i++;
}

Tip: If you forget to increment the value of the variable used in the condition, the loop will never end. This could cause the browser to crash.

Do/while Cycle

The Do/while loop is a variant of the while loop. The loop executes the code block once, and then repeats the loop if the condition is true, before checking if the condition is true.
Grammar:
Todo
{
Code that needs to be executed
}
while (condition);
The following example uses the Do/while loop. The loop executes at least once, and even if the condition is false, the hidden code block executes before the condition is tested:
Todo
{
X=x + "The number is" + i + "<br>";
i++;
}
while (I<5);
Don't forget to increment the value of the variable used in the condition, otherwise the loop will never end!
Compare for And while

For statement instance

The loop in this example uses a for loop to display all the values in the cars array:
cars=["BMW", "Volvo", "Saab", "Ford"];
var i=0;
for (; Cars[i];)
{
document.write (Cars[i] + "<br>");
i++;
}

While statement instance

The loop in this example uses a while loop to display all the values in a cars array:
cars=["BMW", "Volvo", "Saab", "Ford"];
var i=0;
while (Cars[i])
{
document.write (Cars[i] + "<br>");
i++;
}

Small extension

for (Var i=0;i<6;i+=4)
{
alert (i);
}
var i=0;
while (I<8)
{
alert (i);
i++;
}