Quick Reach
What are JavaScript loops?
JavaScript loop is the way to iterate over a block of code for a given number of times. There are a few types of JavaScript loops supported that you can use in JS programming depending on the scenario. The for loop is one of those. Others include
The for loop is one of those. Others include While and do while loops. This tutorial only covers the for loop.
The for loop
The for loop is generally used when you know the number of iterations in loops. You can use for loops with an array as well. Following is the structure of for loop JavaScript.
See an example of for loop
Structure of JavaScript for loop
The structure of for loop is:
for ( initialization; condition; update_the_counter){
//Code to be executed;
}
e.g,
for (I = 1; I <=10 ; i++) {
alert (i);
}
Where:
For is followed by initialization e.g. setting a variable start value i=1; This is the first thing that executes in the for loop.
After that, the condition is executed. For example, i <= 10; If the given condition turns out to be true then “Code to be executed” will run. If the condition is false the execution will go out of for loop.
After the statements are executed (if the condition was true) the update_the_counter part will be executed that you can increment or decrease like i++ or i— etc.
As we have gone through the structure of JavaScript for loop, let us look at a few examples of using it.
A for loop example
Following is a basic for loop example. We simply used a variable (i) and displaying its values in HTML paragraph by using the for loop. See example by clicking the link or image below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The loop values are:</p>
<p id=“p1”></p>
<script type=“text/javascript”>
var i;
var displayloop=“”;
for (i=1; i<=10; i++){
displayloop += i + “<BR>”;
}
document.getElementById(“p1”).innerHTML = displayloop;
</script>
</body>
</html>
|
As you can see, the “displayloop” variable is storing values within the for loop of JavaScript and then displayed after for loop’s execution is completed, into HTML paragraph.
For loop example with an array
Following example uses for loop with an array. We have created five array elements. After creating an array, we will run the for loop.
The array length method is used to get the maximum number in condition (array length returns total elements in an array). See example online by clicking the link below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id=“p1”></p>
<script type=“text/javascript”>
var USStates = [“New York”, “Texas”, “Florida”, “California”];
var i;
var arrdisplay = “The State names in JS array are: <BR>”;
for (i=0; i < USStates.length; i++){
arrdisplay += USStates[i] + “<BR>”;
}
document.getElementById(“p1”).innerHTML = arrdisplay;
</script>
</body>
</html>
|
As you can see, the length property of the array is used to assign to the condition in the for loop, which is 4 in that case. So for loop will keep on executing till variable i’s value is less than 4 starting from 0.
Finally, we displayed “arrdisplay” that gathered array elements (US State names), in HTML paragraph.
For loop example with decrement operator
In the above examples, we used increment operator only. The following example is using decrement operator in the JavaScript for loop. See example by clicking the link or image below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>The loop values are:</p>
<p id=“p1”></p>
<script type=“text/javascript”>
var i;
var displayloop=“”;
for (i=11; i—;){
displayloop += i + “<BR>”;
}
document.getElementById(“p1”).innerHTML = displayloop;
</script>
</body>
</html>
|
You can see, the for loop displayed numbers from 10 to 0.
Further Reading: JavaScript array | The while loop | JavaScript foreach statement
Leave A Comment?