WBxs
Feb 10, 2018

Welcome to our tutorial, now I am going to explain how to loop through javascript array with examples.

protect your javascript code

By the end of this tutorial you will be aware of:

What are Javascript Loops?

Javascript loops allow you to repeat code blocks as specified by user.

Types of Javascript Loops


  • forEach : repeats a code blocks for every element in an array
  • for : repeats a code blocks a specified number of times
  • while : repeats a code blocks as long as a specified condition is true
  • do/while : same as "while" loop but runs once before a specified condition is checked
  • for/in : repeats a code blocks for every property of an object
Next will explain each type of javascript loop with examples to choose your best way.

Javascript ForEach Loop Example

In "ForEach Loop" type, array is called dot forEach with one parameter that represents a custumizable function. This function is called for each element within the array as shown in below example.
<script>
var animals = ["Cat", "Dog", "Eagle", "Rat"];
animals.forEach(myfunction);
function myfunction(element, index, array)
{
document.write("Element at index " + index + " has the value " +
element + "<br />");
}
</script>
In this case, the function passed to forEach is called myfunction. It takes three parameters: the element, its index, and the array. These can be used as specified in your function. In this example, just the element and index values are displayed using the function "document.write". Once an array has been set with elements, the method could be used like this: "animals.forEach(myfunction)".
The output from which is:
Element at index 0 has the value Cat
Element at index 1 has the value Dog
Element at index 2 has the value Eagle
Element at index 3 has the value Rat

Javascript For Loop Example

In "For Loop" type, there are five ways to use it with general form of "for( 'first value of counter variable' ; 'condition to stop loop' ; 'operation on counter variable' )".
//First type: addition operation + single statement. Where,

//addition operation adds one to the counter variable (j++), also

//when loop contains a single statement, curly braces are not required to enclose it.

var animals = ["Cat", "Dog", "Eagle", "Rat"];
for (var j = 0 ; j < animals.length ; j++) document.write("Element at index " + j + " has the value " + animals[j] + "<br />");
//Second type: subtraction operation + single statement. Where,

//subtraction operation adds one to the counter variable (j--), suppose that output from which will be reversed in comparison to the previous.

var animals = ["Cat", "Dog", "Eagle", "Rat"];
for (var j = animals.length-1 ; j > 0 ; j--) document.write("Element at index " + j + " has the value " + animals[j] + "<br />");
//Third type: addition operation + multiple statement. Where,

//as loop contains more than one statement, curly braces shall enclose them.

var fruits = ["apple", "orange", "banana"];
var average_sales = [5, 20, 6];
var openning_days = 25;
var total_sales;
for (var j = 1; j <= 10; j++)
{
total_sales = average_sales[j] * openning_days[j];
document.write("Total sales of " + fruits[j] + " is " + total_sales);
}
//Forth type: addition operation + infinite running loops. Where,

//Using break statement with if statement providing a way to stop running loops.

//if statement will be explained in further tutorial.

var j = 0;
for ( ; ; )
{
document.write(j);
document.write("<BR>");
if(j<6){break;}else{j++;}
}
//Fifth type: addition operation + multiple or nested for loops. Where,

//multiple for loops shall contain different counter variables for each loop.

for (var i = 1; i <= 10; i++)
{
for (var j = 1; j <= 25; j++)
{
document.write("*");
}
document.write("<BR>");
}

Javascript While Loop Example

In "While Loop" type, the statments starts to be executed after the check of condition as below in form of while(condition){//...statements...}.
var j = 0;
while ( j<6 )
{
document.write(j);
document.write("<BR>");
j++;
}

Javascript Do While Loop Example

In "Do While Loop" type, the statments starts to be executed before the check of condition as below in form of do{//...statements...}while(condition).
var i = 0;
do
{
document.write(j);
document.write("<BR>");
j++;
}
while( i<6 )

Javascript For In Loop Example

This is best explained in next tutorial "Best Way To Loop Through Javascript Array Of Objects".

Try WhiteBoxes JavaScript Obfuscator >>

Thank you for reading the above article. Please let us know your comments below.

References:
  • Practical Experience
About the author

Adam Hassan

Adam is a freelance web designer, recreational software developer, author and CEO of infoapper.com . Also, has passion to learn and transfer the know-how of every valuable thing.
Views: 340
× Close
Results:
Want to Enable Key Features? Create a Free Account.