WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

JavaScript For Loop


Loops can execute a square of code various times.


JavaScript Loops

Loops are convenient, in the event that you need to run a similar code again and again, each time with an alternate value.

Often this is the situation when working with arrays:

Instead of writing:

content += cars[0] + "<br>";
text += cars[1] + "<br>";
content += cars[2] + "<br>";
text += cars[3] + "<br>";
content += cars[4] + "<br>";
text += cars[5] + "<br>";

You can write:

for (I = 0; I < cars.length; i++) {
    content += cars[i] + "<br>";
}
Try it Yourself »

Different Kinds of Loops

JavaScript bolsters various types of loops:

  • for -circles through a square of code various times
  • for/in -circles through the properties of an object
  • while -circles through a square of code while a predetermined condition is true
  • do/while - additionally circles through a square of code while a determined condition is true

The For Loop

The for circle is frequently the apparatus you will utilize when you need to make a loop.

The for circle has the accompanying syntax:

for (statement 1; articulation 2; proclamation 3) {
    code square to be executed
}

Statement 1 is executed before the circle (the code square) starts.

Statement 2 characterizes the condition for running the circle (the code block).

Statement 3 is executed each time after the circle (the code square) has been executed.

Example

for (I = 0; I < 5; i++) {
    content += "The number is " + I + "<br>";
}
Try it yourself »

From the model above, you can read:

Statement 1 sets a variable before the circle begins (var I = 0).

Statement 2 characterizes the condition for the circle to run (I should be not exactly 5).

Statement 3 builds an esteem (i++) each time the code hinder on the up and up has been executed.


Statement 1

Normally you will utilize articulation 1 to start the variable utilized on top of it (I = 0).

This isn't generally the situation, JavaScript couldn't care less. Explanation 1 is optional.

You can start numerous qualities in proclamation 1 (isolated by comma):

Example

for (I = 0, len = cars.length, content = ""; I < len; i++) {
    content += cars[i] + "<br>";
}

And you can preclude explanation 1 (like when your qualities are set before the circle starts):

Example

var I = 2;
var len = cars.length;
var content = "";
for (; I < len; i++) {
    content += cars[i] + "<br>";
}
Try it Yourself »

Statement 2

Often proclamation 2 is utilized to assess the state of the underlying variable.

This isn't generally the situation, JavaScript couldn't care less. Proclamation 2 is additionally optional.

If proclamation 2 returns genuine, the circle will begin once again once more, in the event that it returns false, the circle will end.

On the off chance that you discard explanation 2, you should give a break inside the circle. Generally the circle will never end. This will crash your program. Find out about breaks in a later section of this tutorial. 

Statement 3

Often articulation 3 expands the underlying variable.

This isn't generally the situation, JavaScript couldn't care less, and articulation 3 is optional.

Statement 3 can do anything like negative addition (I- - ), positive increase (I = I + 15), or anything else.

Statement 3 can likewise be discarded (like when you increase your qualities inside the circle):

Example

var I = 0;
var len = cars.length;
for (; I < len; ) {
    content += cars[i] + "<br>";
    i++;
}
Try it Yourself »

The For/In Loop

The JavaScript for/in proclamation circles through the properties of an object:

Example

var individual = {fname:"John", lname:"Doe", age:25};

var content = "";
var x;
for (x face to face) {
    content += person[x];
}
Try it yourself »

The While Loop

The while circle and the do/while circle will be clarified in the following chapter.