3 Examples That Explain JavaScript for loop

3 Examples That Explain JavaScript for loop

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:

JavaScript for loop

Experience this example online

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

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:

JavaScript for loop decrement

Experience this example online

You can see, the for loop displayed numbers from 10 to 0.

Further Reading: JavaScript array | The while loop | JavaScript foreach statement